vue中配置开发环境和生产环境api

首先在 config 目录下新建一个 proxyConfig.js 文件，并写入如下代码：

module.exports = {
    proxy: {
     '/api': {
      target:'http://xxx.xxx.xx.xx:xxxx',  // 接口域名
         changeOrigin:true,  //是否跨域
         pathRewrite: {
             '^/api':''  //需要rewrite的,
         }
     }
    }
}

配置完上面步骤之后还需单独配置生产环境和开发环境

打开 config --> dev.env.js 并写下如下代码

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT:'"/api"'//新增这一条
})

打开 config --> prod.env.js 并写下如下代码

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT:'"http://xxx.xxx.xx.xx:xxxx"'//线上接口地址
}

然后还需要配置 config --> index.js ，写下如下代码

const proxyConfig = require('./proxyConfig')  //引入跨域处理

//ctrl+f 搜索 proxyTable 大概在14行左右，修改为如下
proxyTable: proxyConfig.proxy

最后在 main.js 中注册到 vue 原型上

Vue.prototype.$baseUrl = process.env.API_ROOT

在 vue文件 中使用 axios 请求的时候，直接使用如下请求

axios.get(this.$baseUrl + '/xxx/xxx', {
     params: {
     }
}).then(res => {}).catch(err => console.log(err))