vue生产环境和开发环境配置不同的api地址

vue生产环境和开发环境配置不同的api地址

用vue-cli2构建的项目中，有两个文件是用来区分生产环境和开发环境的。

   /config/dev.env.js
    /config/prod.env.js

在main.js中可以得到当前的开发环境：

var env = process.env.NODE_ENV;

所以根据不同的环境配置不同的api，

其中我有两个存放不同api地址的json文件。因为我用的api地址有多个，所以放在json文件里统一管理。
在main.js文件中引入两个JSON文件。

import apiConfigProd from '../static/apiConfigProd.json'
import apiConfigDev from '../static/apiConfigDev.json'

我的apiConfigDev.json

{
"api": "apiDevUrl",
"api2": "apiDev2Url",
"websocketUrl":: "ws://......"
}

我的apiConfigProd.json：

{
"api": "apiProdUrl",
"api2": "apiProd2Url",
"websocketUrl":: "wss://......"
}

其中apiConfigProd是生产环境的api地址，apiConfigDev是开发环境的api地址。并且两个josn文件中的key命名一样，方便在代码中使用。

然后，在main.js中添加如下代码：
development是开发环境，production是生产环境。这里我用的是axios, Vue.prototype.apiConfig是vue的全局属性

var env = process.env.NODE_ENV;

if (env == 'development') {
  axios.defaults.baseURL = apiConfigDev.api
  Vue.prototype.apiConfig = apiConfigDev
} else if (env == 'production') {
  axios.defaults.baseURL = apiConfigProd.api
  Vue.prototype.apiConfig = apiConfigProd
}

然后在组件中使用,可直接打出log，查看当前的api地址：

console.log(this.apiConfig)

使用哪个地址就直接点哪个，this.apiConfig.api2

this.axios.get(this.apiConfig.api2, {
    params: {
      id: 12345
    }
  })
  .then(()=>{})

vue打包的时候,peocess.env.NODE_ENV默认是‘production’。会自动加载生产环境的api地址。