前言：

在工作中，后臺(tái)接口常常會(huì)有多套環(huán)境，多個(gè)host，什么正式環(huán)境，測(cè)試環(huán)境，xxx環(huán)境，你在工作中常常遇到的問(wèn)題是：讓你發(fā)一個(gè)某某環(huán)境的包，有的時(shí)候在同一個(gè)域名下可以使用location.hostname作為你的baseUrl也行，但是你本地調(diào)試又要改來(lái)該去，容易亂。

方案：

結(jié)合vue-cli的文檔,我們可以在執(zhí)行vue-cli-service的時(shí)候可以傳一個(gè)mode參數(shù)，當(dāng)你執(zhí)行--mode xxx的時(shí)候，會(huì)去你的根目錄上尋找.env.xxx文件，其中.env文件是在所有模式都加載的，然后你就可以寫(xiě)自己定義的變量。
注意：變量的名稱得是：VUE_APP_*方式的，除此之外還有NODE_ENV和BASE_URL可以在程序代碼中process.env.xxx可以訪問(wèn)到你需要用到的變量
我的代碼實(shí)現(xiàn)：
package.json文件：

    "serve:mytest": "vue-cli-service serve --mode mytest-dev",
    "build:mytest": "vue-cli-service build --mode mytest-prod",

你可以新增更多，確保一一對(duì)應(yīng)不然會(huì)默認(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)境變量為其他值的時(shí)候，需要你自己配置 webpack，不然沒(méi)法分包加載優(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'
})
// 獲取某個(gè)接口的時(shí)候
getData(params) {
    return request.get('/path/', { params })
  }

這樣你調(diào)試的某個(gè)特定環(huán)境的時(shí)候可以執(zhí)行npm run serve:mytest，
發(fā)版本npm run build:mytets就可以來(lái)，新增環(huán)境同樣操作即可！