vue-cli3添加模式配置多環境變量

vue-cli3配置多環境變量

先掛官網描述：環境變量和模式

需求

根據運行環境判斷執行代碼：

• 預發環境操做完成跳轉地址與線上環境跳轉地址不一樣
• 線上環境添加埋點腳本

實現

Step1：在項目根目錄中新建.env.uat

.env.uat配置以下：

VUE_APP_BUILD_TYPE=uat

vue-cli中規定，只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。
代碼中能夠經過process.env.VUE_APP_SECRET這樣訪問。

• NODE_ENV 和 BASE_URL 是兩個特殊變量，在代碼中始終可用

Step2：修改 package.json

傳遞 --mode 選項參數爲命令行覆寫默認的模式。

"scripts": {
    "build": "vue-cli-service build",
    "build:uat": "vue-cli-service build --mode uat"
  }

Step3：使用

// 是否預發部署
const IS_UAT = process.env.VUE_APP_BUILD_TYPE === 'uat'
const _url =  IS_UAT ? 'http://a.123.com' : 'http://b.123.com'

// 是否添加埋點
const IS_ADD_JAQ = process.env.NODE_ENV === 'production' && !IS_UAT
if (IS_ADD_JAQ && loginUser) addJaq(loginUser)
 ...

優化

到這，功能已經實現了。

美滋滋地打個包，媽呀，體積也太大了：

此處解決辦法爲強寫NODE_ENV，最終.env.uat配置以下：

NODE_ENV=production
VUE_APP_BUILD_TYPE=uat

這樣子順眼些了，但整個項目打包這部分仍是有很大的優化空間，下期再幹咯～