vue-cli3代理解决跨域

在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。

在vue.config.js文件（cli3会自动生成，如果没有就在根目录新建一个）中的devServer.proxy这个对象进行配置，其中devServer.proxy指向一个开发环境下的服务器API地址，配置如下：

module.exports = {
  lintOnSave: false, //关闭eslint检测\
  devServer:{
    open: false,//项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
    proxy: {
      '/api': { 
        target: 'http://192.168.1.249:9527', //对应自己的接口，代理地址修改后必须重启项目
        changeOrigin: true, //是否允许跨域
        pathRewrite: {
          // 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/user/userInfo 时
          // 实际上访问的地址是：http://192.168.1.249:9527/user/userInfo,因为重写了 /api

          '^/api': ''
        }
      }
    }
  }
}

baseUrl的配置

//开发环境时，/api会被替换为上面配置的代理域名'http://192.168.1.249:9527'
//.env 默认全局配置文件
//.env.development 开发环境配置文件
//.env.production 生产环境配置文件
 //文件名为Vue的约定，不可随意更改
let config = process.env; //process是nodeJs的全局变量，其中包含了env的属性，Vue项目启动时会自动读取.env文件中的环境变量
//判断是否为开发环境，是，替换为'/api'，否，替换为线上地址
let base = config.NODE_ENV === 'development' ? '/api' : '线上地址';

var http = {
  request:(url, method, data, headers, isjson)=>{
      return new Promise((resolve,reject)=>{
        let headerDefult = {
          "content-type": "application/x-www-form-urlencoded", //根据需要设置请求头
        }
        headers = merge(headerDefult, headers)
        data = isjson? data: qs.stringify(data)   //传入的数据是否为json格式
        axios({
          method, //请求方式
          baseURL:base, //域名
          url:url, //接口地址
          data, //数据
          timeout: 5000, //请求超时的时间，（超时后会进入catch）
          headers, //请求头
        })
        .then(res=>{
          if(res.status == 200){
            resolve(res.data)
          }else{
            reject( res && res.data || '')
          }
        })
        .catch(e=>{
          reject(e)
        })
      })
  }
}

环境配置

.env.production生产环境

NODE_ENV = 'prod'
ENV = 'prod'
VUE_APP_BASE_API = 'https://www.xxxxx.com/api'

.env.test测试环境

NODE_ENV = 'test'
ENV = 'test'
VUE_APP_BASE_API = 'http://www.xxxxxxx.com/api'

配置package.json的打包命令

//mode后面跟环境变量的值
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:prod":"vue-cli-service build --mode prod" //打包生产环境
    "build:test": "vue-cli-service build --mode test"  //打包测试环境
  },

运行打包命令打包

测试环境：npm run build:test 
正式环境：npm run build:prod