前言：
在工作中，后臺接口常常會有多套環(huán)境肩碟，多個host，什么正式環(huán)境凸椿，測試環(huán)境削祈，xxx環(huán)境，你在工作中常常遇到的問題是：讓你發(fā)一個某某環(huán)境的包脑漫，有的時候在同一個域名下可以使用location.hostname作為你的baseUrl也行髓抑，但是你本地調(diào)試又要改來該去，容易亂优幸。
方案：
結(jié)合vue-cli的文檔,我們可以在執(zhí)行vue-cli-service的時候可以傳一個mode參數(shù)吨拍，當(dāng)你執(zhí)行--mode xxx的時候，會去你的根目錄上尋找.env.xxx文件网杆，其中.env文件是在所有模式都加載的密末，然后你就可以寫自己定義的變量。
注意：變量的名稱得是：VUE_APP_*方式的跛璧，除此之外還有NODE_ENV和BASE_URL可以在程序代碼中process.env.xxx可以訪問到你需要用到的變量
我的代碼實現(xiàn)：
package.json文件：
"serve:mytest": "vue-cli-service serve --mode mytest-dev",
"build:mytest": "vue-cli-service build --mode mytest-prod",
你可以新增更多严里，確保一一對應(yīng)不然會默認(rèn)development模式。
.env.mytest-prod
NODE_ENV=production
VUE_APP_HOST = http://1.1.1.1:4000
env.mytest-prod
NODE_ENV=development
VUE_APP_HOST = http://2.2.2.2:4000
注意：NODE_ENV最好是vue內(nèi)置的三種值：development 追城，production刹碾，test,你定義環(huán)境變量為其他值的時候，需要你自己配置 webpack座柱，不然沒法分包加載優(yōu)化迷帜。
api.js
// 以axios為例
import axios from 'axios'
const request = axios.create({
timeout: 60000,
baseURL: process.env.VUE_APP_HOST || '1.1.1.1:1111'
})
// 獲取某個接口的時候
getData(params) {
return request.get('/path/', { params })
}
這樣你調(diào)試的某個特定環(huán)境的時候可以執(zhí)行npm run serve:mytest物舒，
發(fā)版本npm run build:mytets就可以來，新增環(huán)境同樣操作即可戏锹！
