vue-cli3.0 環境變量解釋(自己收藏)

1.配置npm run 的模式

 在項目的根目錄編輯package.json，分爲開發 測試 生產 甚至更多。

"scripts": {
  "dev": "vue-cli-service serve --mode dev",
  "test": "vue-cli-service build --mode test",
  "prod": "vue-cli-service build --mode prod"
},

2.創建環境配置文件

在項目的根目錄新建以下文件

.env.dev  .env.test .env.prod 

.env # 在所有的環境中被載入

.env.local # 在所有的環境中被載入，但會被 git 忽略

.env.[mode] # 只在指定的模式中被載入

.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略

3.配置環境的默認變量

  只能配置 NODE_ENV=production   webpack的讀取NODE_ENV配置才啓用壓縮邏輯，默認是dev的NODE_ENV所以打包出來特別大

NODE_ENV = 'production'

4.配置.env環境的業務變量

VUE_APP_NAME= 'abc'

只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你可以在應用的代碼中這樣訪問它們：

console.log(process.env.VUE_APP_NAME)