本文參考：https://blog.csdn.net/weixin_33840661/article/details/91393068
https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
配置環(huán)境變量的目的
項目開發(fā)過程中末捣，至少會經(jīng)歷開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境(即正式環(huán)境)三個階段。不同階段請求的狀態(tài)(如接口地址等)不盡相同，若手動切換接口地址是相當(dāng)繁瑣且易出錯的吏祸。于是環(huán)境變量配置的需求就應(yīng)運而生，我們只需做簡單的配置徘钥，把環(huán)境狀態(tài)切換的工作交給代碼派殷。
模式
模式是 Vue CLI 項目中一個重要的概念。默認情況下坚踩，一個 Vue CLI 項目有三個模式：
development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit
配置
你可以通過為 .env 文件增加后綴來設(shè)置某個模式下特有的環(huán)境變量荡灾。比如，如果你在項目根目錄創(chuàng)建一個名為 .env.development 的文件瞬铸，那么在這個文件里聲明過的變量就只會在 development 模式下被載入批幌。
默認文件名：
.env
.env.development
.env.production
.env.test
運行npm run dev的時候會讀取.env.development里面的變量，運行npm run build的時候會讀取.env.production里面的變量嗓节。
你可以通過傳遞 --mode 選項參數(shù)為命令行覆寫默認的模式荧缘。例如，如果你想要在構(gòu)建命令中使用開發(fā)環(huán)境變量拦宣，請在你的 package.json 腳本中加入：
"dev-build": "vue-cli-service build --mode development",
環(huán)境加載屬性
為一個特定模式準備的環(huán)境文件 (例如 .env.production) 將會比一般的環(huán)境文件 (例如 .env) 擁有更高的優(yōu)先級截粗。
文件內(nèi)容
以VUE_APP_開頭，例如：VUE_APP_TITLE=My App
訪問
通過process.env來訪問鸵隧，例如：process.env.VUE_APP_TITLE // 'My App'
注意：
不能直接寫在html標簽里面绸罗，<div>{{process.env.VUE_APP_TITLE}}</div>，需要通過一個變量來獲取豆瘫，否則會報'process' is not defined从诲。
NODE_ENV 和 BASE_URL
除了 VUE_APP_* 變量之外，在你的應(yīng)用代碼中始終可用的還有兩個特殊的變量：
NODE_ENV- 會是"development"靡羡、"production"或"test"中的一個系洛。具體的值取決于應(yīng)用運行的模式。BASE_URL- 會和vue.config.js中的publicPath選項相符略步，即你的應(yīng)用會部署到的基礎(chǔ)路徑描扯。
所有解析出來的環(huán)境變量都可以在 public/index.html 中以 HTML 插值中介紹的方式使用。如：<link rel="icon" href="<%= BASE_URL %>favicon.ico">
