為什么需要配置環(huán)境變量和模式呢？

所有方法肯定是來源于現(xiàn)實(shí)的需求。在一個(gè)產(chǎn)品的前端開發(fā)過程中，一般來說會經(jīng)歷本地開發(fā)、測試腳本、開發(fā)自測、測試環(huán)境、預(yù)上線環(huán)境，然后才能正式的發(fā)布。

對應(yīng)每一個(gè)環(huán)境可能都會有所差異，比如說用戶訪問資源權(quán)限、服務(wù)器地址、接口地址等。在各個(gè)環(huán)境切換的時(shí)候，就需要不同的配置參數(shù)，所以就可以用環(huán)境變量和模式，來方便我們管理。

環(huán)境變量

1）環(huán)境變量文件分類

在vue-cli3中可以在根目錄（與package.json同級）中創(chuàng)建以下四種類型的環(huán)境變量文件：

.env ? ? ? ? ? ? ? ?# 在所有的環(huán)境中被載入
.env.local ? ? ? ? ?# 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode] ? ? ? ? # 只在指定的模式中被載入
.env.[mode].local ? # 只在指定的模式中被載入，但會被 git 忽略

值得注意的是，為一個(gè)特定模式準(zhǔn)備的環(huán)境文件的（如：.env.production）將比一般的環(huán)境文件（如：.env）擁有更高的優(yōu)先級。

2）環(huán)境變量配置

每一個(gè)環(huán)境變量文件中只包含環(huán)境變量的“鍵=值”對，所配置的變量中只有以VUE_APP_開頭的變量才會被webpack.DefinePlugin靜態(tài)嵌入到客戶端側(cè)包中，如：

VUE_APP_PERMISSION = true

3）環(huán)境變量訪問

被載入和變量將會對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 ：會是 “development”、“production” 或 “test” 中的一個(gè)。具體的值取決于應(yīng)用運(yùn)行的模式。
• （2）BASE_URL ：會和 vue.config.js 中的 publicPath 選項(xiàng)相符，即你的應(yīng)用會部署到的基礎(chǔ)路徑。

所有解析出來的環(huán)境變量都可以在 public/index.html 中使用，如下：

<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow"  />

模式

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è)模式都會將NODE_ENV的值設(shè)為模式的名稱。

2）模式定義與使用

你可以通過為 .env 文件增加后綴來設(shè)置某個(gè)模式下特有的環(huán)境變量。比如，如果你在項(xiàng)目根目錄創(chuàng)建一個(gè)名為 .env.development 的文件，那么在這個(gè)文件里聲明過的變量就只會在 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)用

針對我們公司的項(xiàng)目來說，每個(gè)項(xiàng)目都設(shè)置了三種模式，分別為development、production和permission。我們都知道前兩個(gè)是vue-cli項(xiàng)目中默認(rèn)有的模式，那么permission模式便是我們在項(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)境變量只有在所對應(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)限控制，對資源進(jìn)行權(quán)限管理，那么就需要對permission模式進(jìn)行編譯。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評論