process.env環境變數
模式
模式是 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.