模式
模式是 Vue CLI 項目中一個重要的概念。默認情況下，一個 Vue CLI 項目有三個模式：
-
development模式用於vue-cli-service serve -
test模式用於vue-cli-service test:unit -
production模式用於vue-cli-service build和vue-cli-service test:e2e
你可以通過傳遞 --mode 選項參數為命令行覆寫默認的模式。例如，如果你想要在構建命令中使用開發環境變量：
vue-cli-service build --mode development
當運行 vue-cli-service 命令時，所有的環境變量都從對應的
NODE_ENV 將決定您的應用運行的模式，是開發，生產還是測試，因此也決定了創建哪種 webpack 配置。
例如通過將 NODE_ENV 設置為 "test"，Vue CLI 會創建一個優化過后的，並且旨在用於單元測試的 webpack 配置，它並不會處理圖片以及一些對單元測試非必需的其他資源。
同理，NODE_ENV=development 創建一個 webpack 配置，該配置啟用熱更新，不會對資源進行 hash 也不會打出 vendor bundles，目的是為了在開發的時候能夠快速重新構建。
當你運行 vue-cli-service build 命令時，無論你要部署到哪個環境，應該始終把 NODE_ENV 設置為 "production" 來獲取可用於部署的應用程序。
NODE_ENV
如果在環境中有默認的 `NODE_ENV`，你應該移除它或在運行 `vue-cli-service` 命令的時候明確地設置 `NODE_ENV`。
環境變量
你可以在你的項目根目錄中放置下列文件來指定環境變量：
.env # 在所有的環境中被載入
.env.local # 在所有的環境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
一個環境文件只包含環境變量的“鍵=值”對：
FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value
請注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態地嵌入到客戶端側的代碼中。這是為了避免意外公開機器上可能具有相同名稱的私鑰。
想要了解解析環境文件規則的細節，請參考
FOO=foo
BAR=bar
CONCAT=$FOO$BAR # CONCAT=foobar
被載入的變量將會對 vue-cli-service 的所有命令、插件和依賴可用。
環境文件加載優先級
為一個特定模式准備的環境文件 (例如 .env.production) 將會比一般的環境文件 (例如 .env) 擁有更高的優先級。
此外，Vue CLI 啟動時已經存在的環境變量擁有最高優先級，並不會被 .env 文件覆寫。
.env 環境文件是通過運行 vue-cli-service 命令載入的，因此環境文件發生變化，你需要重啟服務。
示例：Staging 模式
假設我們有一個應用包含以下 .env 文件：
VUE_APP_TITLE=My App
和 .env.staging 文件：
NODE_ENV=production
VUE_APP_TITLE=My App (staging)
-
vue-cli-service build會加載可能存在的.env、.env.production和.env.production.local文件然后構建出生產環境應用。 -
vue-cli-service build --mode staging會在 staging 模式下加載可能存在的.env、.env.staging和.env.staging.local文件然后構建出生產環境應用。
這兩種情況下，根據 NODE_ENV，構建出的應用都是生產環境應用，但是在 staging 版本中，process.env.VUE_APP_TITLE 被覆寫成了另一個值。
在客戶端側代碼中使用環境變量
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你可以在應用的代碼中這樣訪問它們：
console.log(process.env.VUE_APP_SECRET)
在構建過程中，process.env.VUE_APP_SECRET 將會被相應的值所取代。在 VUE_APP_SECRET=secret 的情況下，它會被替換為 "secret"。
除了 VUE_APP_* 變量之外，在你的應用代碼中始終可用的還有兩個特殊的變量：
-
NODE_ENV- 會是"development"、"production"或"test"中的一個。具體的值取決於應用運行的 -
BASE_URL- 會和vue.config.js中的publicPath選項相符，即你的應用會部署到的基礎路徑。
所有解析出來的環境變量都可以在 public/index.html 中以
提示
你可以在 vue.config.js 文件中計算環境變量。它們仍然需要以 VUE_APP_ 前綴開頭。這可以用於版本信息:
process.env.VUE_APP_VERSION = require('./package.json').version
module.exports = {
// config
}
只在本地有效的變量
有的時候你可能有一些不應該提交到代碼倉庫中的變量，尤其是當你的項目托管在公共倉庫時。這種情況下你應該使用一個 .env.local 文件取而代之。本地環境文件默認會被忽略，且出現在 .gitignore 中。
.local 也可以加在指定模式的環境文件上，比如 .env.development.local 將會在 development 模式下被載入，且被 git 忽略。
參考：
1.