一、環境變量配置
在項目開發中我們需要配置環境變量：開發環境，生產環境和測試環境。在cli 2.0的版本中我們是通過在config文件夾進行配置的，vue/cli 3.0相對簡單，只需要在項目根目錄創建 .env 文件即可。以下是環境對應文件名和命令
| 模式 |
對應npm命令 | 對應文件名稱 |
| development | server | .env.development |
| production | build | .env.production |
| test | test | .env.test |
需要注意的是： process.env.NODE_ENV 為默認變量，會自動設置為上邊對應的模式名稱
其他變量必須以 VUE_APP_ 開頭，被載入的變量將會被vue-cli-service的所有命令、插件、依賴可用。
二、自定義模式
默認的三種模式也許並不能滿足我們的所有使用場景，使用自定義模式可以很好地解決這個問題。比如我們的測試網址，就需要一個自定義 gray 模式。
// 1、修改package.json添加一行命令
"gray": "vue-cli-service build --mode gray"
// 2、添加.env.gray文件：在項目根路徑創建.env.gray文件，內容為
NODE_ENV = production VUE_APP_URL=https://**.cc/
現在 gray 環境就會自動引用自己環境內的變量啦，需要注意的是NODE_ENV的名字打包時為production，開發運行為development，否則會造成環境找不到對應的模式配置，打包出的項目體積也會巨大無比。
關於 .env 文件中的內容：VUE_APP_URL 是在 .env.* 文件中定義的，在項目啟動時，vue-cli 會將以 VUE_APP_ 開頭的變量讀取至環境變量，這是 vue-cli 強制要求的。“你想用我的工具，就得遵循我定的規則”。其實這背后是一系列工具鏈（webpack + dotenv + webpack DefinePlugin）相互作用的成果。
三、NODE_ENV 設置為 test、development 以及 其他值時會出現什么情況？
在自定義配置Vue-cli 的過程中，突然有了下面的疑問：為什么打包扔測試環境時，不能直接改變其 NODE_ENV 值，而是通過VUE_APP_ENV_NAME (以VUE_APP_開頭的變量)來區分呢？
后來想想這是不同的配置策略導致的，雖然我扔的是測試環境，但構建出來的包還是要生產環境的包，由此我又產生了另一個疑問：我在vue-cli-service build 時，NODE_ENV 設置成其他值，會發生什么？打出來的包是什么樣子？
1、下面說說如果直接改變其 NODE_ENV 值會發生什么？
簡單來說，打包出來的文件會跟production模式下打包的文件不一樣，沒有集成production包的各個優點。具體來說會有下面幾種情況：
（1）直接 NODE_ENV = ‘test’， 它會創建一個優化過，並且旨在用於單元測試的 webpack 配置，它並不會處理圖片以及一些對單元測試非必需的其他資源。表面來看，就是沒有進行代碼分割只有一個js文件，以及沒有hash等。
（2）NODE_ENV=“development”，它會創建一個 webpack 配置，該配置啟用熱更新，但不會對資源進行 hash 也不會打出 vendor bundles，打包出來的文件跟NODE_ENV="development"模式下打出來的包一樣。
（3）NODE_ENV=“someone”，環境變量隨便給一個值，它會默認為NODE_ENV=“development” 的打包策略。包內的內容如下：
所以運行 vue-cli-service build 命令時，無論部署到哪個環境，都應該始終把 NODE_ENV 設置為 “production“ ，區別環境時可以以 VUE_APP_ 開頭的變量命名賦值。
詳見官方文檔：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F