vue打包時配置不同的環境變量(vue-cli4)

以配置測試環境test為例

1、在package.json文件中配置script文件

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

2、創建文件

根據配置文檔中模式和環境變量中顯示

在根目錄中創建文件.env.[mode] # 只在指定的模式中被載入

只有以 `VUE_APP_` 開頭的變量會被 `webpack.DefinePlugin` 靜態嵌入到客戶端側的包中

故而我們要在跟目錄中創建一個 .env.testenv文件，內容如下

VUE_APP_MODE='test'  //這個是自定義變量
NODE_ENV='production' //這個是設置mode,此處mode為websocket中的mode

在APP.vue的created鈎子中寫下如下代碼

console.log(process.env);

3、運行

完成上述設置后運行並打包輸出

輸入命令npm run build-testenv

此時控制台輸出如下

BASE_URL: ""
NODE_ENV: "production"
VUE_APP_MODE: "test"

4、使用

在項目中將需要使用到這個變量的地方寫上process.env.VUE_APP_MODE,即可在項目打包后於對應位置寫上該字段