為什么需要配置環(huán)境變量和模式呢跋破？
所有方法肯定是來源于現(xiàn)實(shí)的需求簸淀。在一個(gè)產(chǎn)品的前端開發(fā)過程中，一般來說會(huì)經(jīng)歷本地開發(fā)毒返、測(cè)試腳本租幕、開發(fā)自測(cè)、測(cè)試環(huán)境拧簸、預(yù)上線環(huán)境劲绪，然后才能正式的發(fā)布。對(duì)應(yīng)每一個(gè)環(huán)境可能都會(huì)有所差異盆赤，比如說用戶訪問資源權(quán)限贾富、服務(wù)器地址、接口地址等牺六。在各個(gè)環(huán)境切換的時(shí)候颤枪，就需要不同的配置參數(shù)，所以就可以用環(huán)境變量和模式淑际，來方便我們管理畏纲。
環(huán)境變量
1）環(huán)境變量文件分類：
在vue-cli3中可以在根目錄（與package.json同級(jí)）中創(chuàng)建以下四種類型的環(huán)境變量文件：
.env # 在所有的環(huán)境中被載入
.env.local # 在所有的環(huán)境中被載入扇住，但會(huì)被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會(huì)被 git 忽略
值得注意的是盗胀，為一個(gè)特定模式準(zhǔn)備的環(huán)境文件的（如：.env.production）將比一般的環(huán)境文件（如：.env）擁有更高的優(yōu)先級(jí)艘蹋。
2）環(huán)境變量配置
每一個(gè)環(huán)境變量文件中只包含環(huán)境變量的“鍵=值”對(duì)，所配置的變量中只有以VUE_APP_開頭的變量才會(huì)被webpack.DefinePlugin靜態(tài)嵌入到客戶端側(cè)包中票灰，如：
VUE_APP_PERMISSION = true
3）環(huán)境變量訪問
被載入和變量將會(huì)對(duì)vue-cli-service的所有命令女阀、插件和依賴可用。在應(yīng)用代碼中通過process.env.[變量名]進(jìn)行訪問屑迂，從而獲取到它的值浸策，如下：
if (isDev()) {
return process.env.VUE_APP_PERMISSION === "true" ? true : false;
}
除了 VUE_APP_ 變量之外，在你的應(yīng)用代碼中始終可用的還有兩個(gè)特殊的變量：
（1）NODE_ENV ：會(huì)是 "development"屈糊、"production" 或 "test" 中的一個(gè)的榛。具體的值取決于應(yīng)用運(yùn)行的模式琼了。
（2）BASE_URL ：會(huì)和 vue.config.js 中的 publicPath 選項(xiàng)相符逻锐，即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑。
所有解析出來的環(huán)境變量都可以在 public/index.html 中使用雕薪，如下：
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
模式
1）模式分類
在vue-cli中默認(rèn)情況下有以下三種模式：
development 模式： 用于 vue-cli-service serve
production 模式： 用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式： 用于 vue-cli-service test:unit
模式與環(huán)境變量不同昧诱，一個(gè)模式可包含多個(gè)環(huán)境變量（NODE_ENV），每個(gè)模式都會(huì)將NODE_ENV的值設(shè)為模式的名稱所袁。
2）模式定義與使用
你可以通過為 .env 文件增加后綴來設(shè)置某個(gè)模式下特有的環(huán)境變量盏档。比如，如果你在項(xiàng)目根目錄創(chuàng)建一個(gè)名為 .env.development 的文件燥爷，那么在這個(gè)文件里聲明過的變量就只會(huì)在 development 模式下被載入蜈亩。
也可以通過傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式。例如前翎，如果你想要在構(gòu)建命令中使用開發(fā)環(huán)境變量稚配，則需在 package.json 腳本中設(shè)置：
"build": "vue-cli-service build --mode development",
結(jié)合實(shí)際應(yīng)用
針對(duì)我們公司的項(xiàng)目來說，每個(gè)項(xiàng)目都設(shè)置了三種模式港华，分別為development道川、production和permission。我們都知道前兩個(gè)是vue-cli項(xiàng)目中默認(rèn)有的模式立宜，那么permission模式便是我們?cè)陧?xiàng)目上自定義的冒萄，為什么要自定義這個(gè)模式呢？
作為非產(chǎn)品設(shè)計(jì)和開發(fā)人員橙数，我們或許并不是很清楚這個(gè)模式產(chǎn)生的根本原因尊流，那么我們先來看看項(xiàng)目上是怎么配置和應(yīng)用這個(gè)模式，從而來了解它的作用灯帮。
首先在package.json添加一種類型崖技，并修改默認(rèn)環(huán)境變量為permission環(huán)境變量:
在根目錄下創(chuàng)建.env.permission文件蜘澜，來定義變量和值：
如上圖所示，定義了一個(gè).env.permission文件响疚，并在該文件中設(shè)置VUE_APP_PERMISSION變量鄙信，并為其復(fù)制為true。（ 在src文件夾下的任意文件中都可以關(guān)聯(lián)到process.env.NODE_ENV環(huán)境變量）
然后找到該變量引用的地方忿晕，如下所示：
從上圖便可看出装诡，VUE_APP_PERMISSION環(huán)境變量影響著該系統(tǒng)是否開啟運(yùn)維模式，即權(quán)限管理模式践盼。當(dāng)系統(tǒng)通過yarn permission命令運(yùn)行時(shí)鸦采，則進(jìn)入權(quán)限控制模式，需要進(jìn)行登錄驗(yàn)證咕幻，并根據(jù)登錄用戶獲取相應(yīng)的資源渔伯。
這里需要特別注意的是，每種環(huán)境變量只有在所對(duì)應(yīng)的模式被編譯執(zhí)行的時(shí)候才能被讀取肄程，也就是說锣吼，如果我在permission模式下執(zhí)行編譯，那就只能讀取該模式下的變量蓝厌，而不能讀取development和production或其他模式中所設(shè)置的環(huán)境變量玄叠。所以如果在開發(fā)模式下進(jìn)行編譯，那么就無法讀取到permission模式下的VUE_APP_PERMISSION變量拓提。這也保證了不同模式編譯結(jié)果的唯一性读恃。
由此可見，當(dāng)我們執(zhí)行yarn serve的時(shí)候走的是development模式代态，而該模式中并未定義VUE_APP_PERMISSION環(huán)境變量寺惫，所以isPermission()為false，即不走權(quán)限控制蹦疑。所以如果要走權(quán)限控制西雀，對(duì)資源進(jìn)行權(quán)限管理，那么就需要對(duì)permission模式進(jìn)行編譯必尼。
