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

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

以配置測試環境test爲例

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

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

二、建立文件

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

在根目錄中建立文件.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);

三、運行

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

輸入命令npm run  build-testenv

此時控制檯輸出以下

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

四、使用

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