vue开发微信商城项目总结之四--本地代理处理跨域问题

Leck1e 发布于2019-08-21 16:40 / 1304人阅读

摘要：关于项目的基本描述，参见开发微信商城项目总结之一项目介绍开发微信商城项目总结之二配置开发微信商城项目总结之三根据不同的开发环境做配置之前处理跨域问题是通过，但是只有开发环境是跨域的，代码打包后上传到服务器便不再跨域，所以在本地做了判断，判断

关于项目的基本描述，参见

vue开发微信商城项目总结之一–项目介绍

vue开发微信商城项目总结之二–Eslint配置

vue开发微信商城项目总结之三–根据不同的开发环境做配置

之前处理跨域问题是通过jsonp，但是只有开发环境是跨域的，代码打包后上传到服务器便不再跨域，所以ajax在本地做了判断，判断是否是跨域，跨域则走jsonp否则其他正常调用

可以通过本地配置nginx做代理来处理跨域，但是作为一个前端来说，学习成本略高，

后来发现vue-cli中也有代理，解决开发环境跨域的问题，

config>index.js 在dev中找到中找到proxyTable，并对其进行配置，我的index.js如下

var path = require("path")
var new_date = new Date();

/**日期时间格式化 20170413170432**/
var date_month = new_date.getMonth() <= 8 ? "0" + (new_date.getMonth() + 1) : (new_date.getMonth() + 1);
var date_day = new_date.getDate() <= 9 ? "0" + new_date.getDate() : new_date.getDate();
var date_hour = new_date.getHours() <= 9 ? "0" + new_date.getHours() : new_date.getHours();
var date_min = new_date.getMinutes() <= 9 ? "0" + new_date.getMinutes() : new_date.getMinutes();
var date_sec = new_date.getSeconds() <= 9 ? "0" + new_date.getSeconds() : new_date.getSeconds();
var new_dateTime = new_date.getFullYear() + "年" + date_month + "月" + date_day + "日" + date_hour + "时" + date_min + "分" + date_sec + "秒";

module.exports = {
  build: {
    env: require("./prod.env"),
    index: path.resolve(__dirname, "../dist/" + new_dateTime + "app" + "/index.html"), // 编译输入的 index.html 文件
    assetsRoot: path.resolve(__dirname, "../dist/" + new_dateTime + "app"), // 编译输出的静态资源路径
    assetsSubDirectory: "static", // 编译输出的二级目录
    assetsPublicPath: "./", // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
    productionSourceMap: false, // 是否开启 cssSourceMap
    productionGzip: false, // 是否开启 gzip
    productionGzipExtensions: ["js", "css"], // 需要使用 gzip 压缩的文件扩展名
    bundleAnalyzerReport: process.env.npm_config_report
  },
  buildppe: {
    env: require("./ppe.env"),
    index: path.resolve(__dirname, "../dist/" + new_dateTime + "ppe" + "/index.html"), // 编译输入的 index.html 文件
    assetsRoot: path.resolve(__dirname, "../dist/" + new_dateTime + "ppe"), // 编译输出的静态资源路径
    assetsSubDirectory: "static", // 编译输出的二级目录
    assetsPublicPath: "./",// 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
    productionSourceMap: false, // 是否开启 cssSourceMap
    productionGzip: false, // 是否开启 gzip
    productionGzipExtensions: ["js", "css"], // 需要使用 gzip 压缩的文件扩展名
    bundleAnalyzerReport: process.env.npm_config_report
  },
  builffffdd: {
    env: require("./ffffd.env"),
    index: path.resolve(__dirname, "../dist/" + new_dateTime + "dev" + "/index.html"), // 编译输入的 index.html 文件
    assetsRoot: path.resolve(__dirname, "../dist/" + new_dateTime + "dev"), // 编译输出的静态资源路径
    assetsSubDirectory: "static", // 编译输出的二级目录
    assetsPublicPath: "./",// 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
    productionSourceMap: false, // 是否开启 cssSourceMap
    productionGzip: false, // 是否开启 gzip
    productionGzipExtensions: ["js", "css"], // 需要使用 gzip 压缩的文件扩展名
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require("./dev.env"),
    port: 1111,
    autoOpenBrowser: true,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/baseUrl": { /* 当发生跨域请求是调用此接口 本地代理*/
        target: "https://api.douban.com/v2/event/list?loc=108288&start=1&count=3",
        changeOrigin: true,
        pathRewrite: {
          "^/baseUrl": ""
        }
      },
    },
    cssSourceMap: false
  }
}

在使用的时候

get () { // 开发环境跨域时调用本地代理 具体查看 config-->index.js
      this.$http.post(process.env.baseUrl)
        .then(res => {
          console.log(res)
          this.data = res
        })
    }

config>config>dev.env.js

var merge = require("webpack-merge")
var prodEnv = require("./prod.env")
 
module.exports = merge(prodEnv, {
  NODE_ENV: ""development"",
  baseUrl: ""/baseUrl"",//处理跨域
  /* 福币商品skuID */
  rechargeList: `[{
    skuid: "020d73154fea407aba111e8a0b010cb1",
    name: "开发",
    thumbPath: ""
  }, {
    skuid: "b7ef02ebab9f4edf9cb44cb184f7dec3",
    name: "开发",
    thumbPath: ""
  }, {
    skuid: "52856479a6e74c4e9ea943ce6b4d4827",
    name: "开发",
    thumbPath: ""
  }, {
    skuid: "a4b821d1bcf34d4b9af286c1a9cedc92",
    name: "开发",
    thumbPath: ""
  }]`,
 
})

process.env 是根据不同的环境调用不同的接口，具体看这里我的项目中一共四个环境

开发环境 dev
测试环境 ffffd
预生产环境 ppe
生产环境（正式环境） production

项目地址在这里

混合云专线服务 PHP开发微信支付小程序开发微信免费开发微信小程序哪里开发微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88597.html

vue开发微信商城项目总结之五--vue实现九宫格抽奖

摘要：根据产品提出的需求，需要做一个抽奖活动页面需求简介九宫格抽奖，中奖概率可配置，以九宫格转盘的形式进行抽奖，奖品分为三类，实物类奖品，收货人信息可编辑，默认为登陆用户，可生成订单福币类奖品，直接发放，可在交易明细中查看优惠劵类奖品，交易明细中根据产品提出的需求，需要做一个抽奖活动页面需求简介九宫格抽奖，中奖概率可配置，以九宫格转盘的形式进行抽奖，奖品分为三类，实物类奖品，收货人...

CoorChice 2019-08-21 16:51 评论0 收藏0
vue开发微信商城项目总结之三--根据不同的开发环境做配置

摘要：项目是基于搭建，项目分为开发环境，测试环境，预生产环境，生产环境，其中开发环境和测试环境调用同一个接口，开发环境调用服务器端的测试接口会跨域，以上需求就引发了一些问题，问题一测试环境包括开发环境，并且开发环境跨域，预生产环境，生产环境，有项目是基于vue-cli搭建，项目分为开发环境，测试环境，预生产环境，生产环境，其中开发环境和测试环境调用同一个接口，开发环境调用服务器端的测试接口...

Magicer 2019-08-22 11:10 评论0 收藏0
vue开发微信商城项目总结之六--关于vuex的思考

先对项目进行一下简单的介绍 vue开发微信商城项目总结之一–项目介绍项目开发初期，由于项目比较着急上线，前端的框架在选型上比较仓促，只是因为vue学习成本较低，就选了它，没有什么别的原因，之前看过angular2一段时间，又趁着周末看了两天vue，就仓促开发，所以埋下了很多坑，项目（项目目前没有对游客开放，是2B2C的模式）上线后，回头填坑，发现了很多问题，因为之前一直是基于Jquery模式的...

PrototypeZ 2019-08-21 17:08 评论0 收藏0
使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

afishhhhh 2019-06-27 16:36 评论0 收藏0
使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

Taonce 2019-08-20 16:49 评论0 收藏0