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地址。