文章目的
之前是用 VueCli 2 做開發，那 VueCli 3 一樣有環境變數的設定，但設定方式會與 2 不太一樣，因此透過此文章來做紀錄。
環境變數使用時機
基本上，在開發時，測試環境下的 API 路徑會與正式環境的路徑不太一樣，因此我們可以利用環境變數來定義這些路徑，以方便我們使用。
VueCli 2 和 VueCli 3 環境變數差異
在 2 中我們會透過 config 資料夾底下的 dev.env.js 和 prod.env.js 兩隻檔案來定義不同環境下的環境變數。
但 3 很不一樣，沒有 config 資料夾了，我們只需要自己命名環境檔，並做一些簡單設定，就可以讓系統自己去判斷該使用哪個檔案中的環境變數，以下我將要做一一介紹。
環境檔命名差別
剛剛有提到，系統會根據我們的環境檔名稱來判斷使用時機，因此我們先來看看有甚麼命名吧。
- .env – 這個檔名的環境檔會在所有環境中被載入。
- .env.local – 這個檔名的環境檔會在所有環境中被載入，但在 git 時會被忽略。
- .env.[mode] – 只會在指定的環境中被載入，mode 的部分就是填入指定環境 Ex：production。
- .env.[mode].local – 同上，但在 git 時會被忽略。
檔案部分只需要新增在專案資料夾底下即可，不用新增在 src 底下。
變數命名
接下來是環境檔中的環境變數命名，這邊跟 2 差別在於命名變數時，需要在自定義名稱前面加上 VUE_APP_ ，後面再加上自定義名稱。
要記得新增一個新的環境變數時，環境要重啟，變數才能做使用。
切換環境檔
前面有提到環境檔也可以在特定環境下才被啟用，這邊要說明如何啟用我們命名的環境檔。
假設我們今天新增一個環境檔，檔名叫做 .env.testing，並且我們希望它只在測試環境下運行。
這時我們需要來到 package.json 資料夾中，裏頭的 scripts 部分，有分為三個類型：
'serve': 'vue-cli-service serve''build': 'vue-cli-service build''lint': 'vue-cli-service lint'
我們只需要這樣改寫即可，'vue-cli-service serve --mode testing'
至於官方，有提供正式的命名方式，只需要照著命名就可以不用再去變更package.json。
開發環境下的環境檔命名為：.env.development
正式環環下的環境檔命名為：.env.production
最後一點提醒，當我們的指定環境檔中(.env.\[mode\])存在與全域環境檔(.env)相同的環境變數時，指定環境檔的權重會比較高。