溫馨提示：本文只適用於vue-cli 3.0 及以上的版本哦~
------------------正文開始------------------
開發項目時，經常會需要在不同環境中切換。那么我們如何配置不同的環境變量呢？
為了更加方便消化本文章，建議先看下官方文檔：
看完官方的文檔如果還沒有明白，可以參考本文。
在vue-cli 構建的項目中，默認有3種模式，如下圖：
我個人的理解就是：
你執行npm run serve時，對應的環境就是開發環境；
你執行npm run build時，對應的環境就是生產環境。
如果你開發的項目中，不止該3種，該咋整呢？像在我開發的項目中，就有本地環境(local)、開發環境(development)、測試環境(devtest)、預發布環境(beta)、生產環境(production)。請記住我括號里面的英文。
來，左邊跟我一起畫個龍，在你右邊兒畫一道彩虹~畫完了，開始進入主題了~
------------------進入主題------------------
1.創建不同環境變量文件
如官方文檔所說，通過為.env文件增加后綴來設置某個模式下特有的環境變量。我這里有5個環境，所以配置了5個.env文件。如下圖：
2.給.env文件添加內容
基本格式如下：
NODE_ENV=環境名稱
VUE_APP_URL=對應的環境地址
如我本地環境的配置就如下圖所示：
我本地是用的easy-mock模擬的數據，所以配置的地址是mock接口地址。
3.在package.json中添加不同環境對應的執行語句
如官方文檔所說，可以通過傳遞 --mode 來配置不同的模式。我自己的項目配置如下圖：
請注意我配置文件中的 serve 與 build 。
4.使用
文件已創建好，配置語句也已寫好。怎么用它呢？
首頁你需要哪個環境，就執行哪個環境的命令語句。
比如我現在需要local環境，就執行 npm run local-serve 。如下圖所示：
然后通過 process.env.NODE_ENV 獲取環境名；通過 process.env.VUE_APP_URL 獲取環境對應的url。
比如我們在axios請求中，就可以把它的baseURL設置為 process.env.VUE_APP_URL ，如下圖所示：
后面的"/web"是根據我自己接口來的，你別也寫個"/web"。
如果你不確定你自己現在是在哪個環境變量下，可以 console.log("當前環境變量："+process.env.NODE_ENV) 和 console.log("當前環境路徑："+process.env.VUE_APP_URL) 看下。
像我的項目中就是下面這2個東東：
輸出的內容就是.env.local文件里面配置的環境變量。
為了更好的理解，我們再執行一條語句， npm run serve ,看看此時的環境變量是哪個？
為什么呢？
因為 npm run serve 默認指向.env.developement，我在里面配置的環境就是上面輸出的內容。.env.developement的配置如下圖：
總而言之就是，你需要哪個環境變量，就 【npm run 對應的環境變量】 就完事了！
關於vue cli4.0 配置環境變量就講到這里了~~如果有更好的建議或者疑問，歡迎留言~