vue-cli中的 mode模式、env環境文件，以及其中定義的環境變量

package.json文件

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build:intranet": "vue-cli-service build --mode intranet",
    "build:test": "vue-cli-service build  --mode test",
    "build:pre": "vue-cli-service build  --mode pre",
    "build": "vue-cli-service build  --mode production"
 },

mode 和 環境文件的關係

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

如上我們在package.json定義的build模式，對應一下的環境文件：
環境文件目錄

.env.development

VUE_APP_CURRENTMODE = 'development'

# base host
VUE_APP_BASE_HOST = ''

# 文件路徑
VUE_APP_FILE_PATH = ''

---

.env.production

VUE_APP_CURRENTMODE = 'production'

# base host
VUE_APP_BASE_HOST = '//www.example.com'

# 文件路徑
VUE_APP_FILE_PATH = '/secondPath/'

---

.env.test

VUE_APP_CURRENTMODE = 'test'

# base host
VUE_APP_BASE_HOST = '//test.example.com:6060'

# 文件路徑
VUE_APP_FILE_PATH = '/secondPath/'

當運行 vue-cli-service 命令時，所有的環境變量都從對應的環境文件中載入。
如果文件內部不包含 NODE_ENV 變量，它的值將取決於模式，例如，在 production 模式下被設置爲 "production"，在 test 模式下被設置爲 "test"，默認則是 "development"。

自測發現：

1. 如果配置mode 比如（vue-cli-service build --mode hello），且沒有 .env.hello文件，也沒有配置NODE_ENV屬性
   結果： 打印的值是 NODE_ENV: 'development'
2. 還是配置 --mode hello，如果有.env.hello文件，且文件爲空
   結果： 打印的仍然是 NODE_ENV: 'development'
3. 還是配置 --mode hello，如果有.env.hello文件，且文件中配置 NODE_ENV = 'hello123'
   結果： 打印的仍然是 NODE_ENV: 'hello123'
4. 如果是 test（有 .env.test文件）
   結果： 打印的值是 NODE_ENV: 'test'，且有自己配置的 VUE_APP開頭的屬性值
5. 如果是 pre（沒有 .env.pre文件）
   結果： 打印的值是 NODE_ENV: 'development'

最終結論：

1. NODE_ENV屬性值 一般只有 production/test/development 三種值（沒有在.env.[mode]文件中配置該值的前提下）
   production對應production、test對應test、其他默認都是development
2. 如果在 .env.[mode] 文件中設置了 NODE_ENV值，則覆蓋

以下三者的關係、優先級

1. package.json 中scripts中定義的 --mode
2. 根目錄下對應的文件名， 例如 .env.development、.env.test、.env.production
3. 環境文件中定義的環境變量 NODE_ENV的取值，如果在環境文件中定義了，則去該值，否則即取 production/test/development 三值之一

請注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態地嵌入到客戶端側的代碼中。這是爲了避免意外公開機器上可能具有相同名稱的私鑰。

vue.config.js中的使用

const IS_RELEASE = process.env.VUE_APP_CURRENTMODE === 'production';
const IS_DEV = process.env.VUE_APP_CURRENTMODE === 'development';
// cdn路徑
const cdnPath = `${process.env.VUE_APP_BASE_HOST}${process.env.VUE_APP_FILE_PATH}`;

console.log('process.env', process.env);

module.exports = {
  publicPath: IS_DEV ? '' : cdnPath,
  lintOnSave: false,
  assetsDir: 'assets',
  // 正式環境關掉 sourceMap
  css: {
    sourceMap: !IS_RELEASE,
  },
  productionSourceMap: !IS_RELEASE,
  // ...
}

VUE Cli 模式和環境變量：
https://cli.vuejs.org/zh/guide/mode-and-env.html#模式