关于Vue-cli3的反向代理配置

配置vue的环境变量

/*先创建，prod,development,testing(这个可以没有)这三个环境文件，然后在文件内设置一个
变量如:VUE_APP_URL,用来放置开发或生产时的api网址*/

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200330140928515.png)

这个插一个page.json的配置小tips：
"scripts": {
    //运行npm run serve时，可自动打开浏览器，不用手动打开
    "serve": "vue-cli-service serve --open" ,
    //--mode prod是用于运行打包命令时,可识别到prod的环境配置数据
    "build": "vue-cli-service build --mode prod",
    //同上原理
    "build test": "vue-cli-service build --mode testing",
    "lint": "vue-cli-service lint"
  },

NODE_ENV = 'production'
VUE_APP_URL= 'http://innov3。。。'

配置反向代理

/*首先在根目录新建一个vue.config.js文件，由于vue3脚手架是没有这个文件的
，所以要手动创建，vue2的有*/

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200330140954261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWFvYWl4aWFveWFv,size_16,color_FFFFFF,t_70)

module.exports = {
    publicPath:'./',//vue-cli3.3+新版本使用
    devServer: {
      proxy: {
        '/api': {
        //process.env.VUE_APP_URL是之前配置的环境文件里的环境变量
        //当你运行的命令不一样时，环境变量也会改变
        //适用于本地开发，解决跨域问题
          target: process.env.VUE_APP_URL, 
          changeOrigin: true,
          ws: true,
          pathRewrite: {
          //调用接口请求数据时，可用‘/api’直接代替环境变量
            '^/api': ''
          }
        }
      }
    }
};
如：
let GET =  (url, params) =>(res=>{
  return new Promise((resolve, reject) => {
    axios.get('/api' + url, {params: params}).then(response => {
      resolve(response.data)
    }).catch(function (error) {
      reject(error)
    })
  })