Vue项目中为生产环境和开发环境配置不同的接口地址

使用工具：vue-cli+axios

---

在开发的时候，由于是前后端分离的项目，接的是后台部署上服务器的接口。

由于涉及到跨域问题，所以在config/index.js中配置：

dev: {
    ....
    proxyTable: {
      '/api': {
        // 测试环境
        target: 'http://api.vipgz1.idcfengye.com/',  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/api': ''   //需要rewrite重写的
        }  
      }
    },

这样在axios请求中，就可以直接使用/api来代替原先的一长串接口地址：

this.axios({
    method: 'POST',
    url: `/api/login`, // 相当于http://api.vipgz1.idcfengye.com/login
    ····
}）

但是如果这样写，在打包部署上服务器后，生产环境中我们不能再使用/api/login来进行请求。我们需要对生产环境和开发环境进行不同的接口配置：

在config/dev.env.js：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  // 增加下面这句
  API_HOST: '"/api"'
})

在config/prod.env.js：

module.exports = {
  NODE_ENV: '"production"',
  // 增加下面这句
  API_HOST: '"http://api.vipgz1.idcfengye.com"'
}

这样，我们可以通过process.env.API_HOST这个变量来获取到相应的接口地址。

更改axios接口地址：

this.axios({
    method: 'POST',
    url: `${process.env.API_HOST}/login`,
    ····
}）