欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中環(huán)境變量的使用與配置講解

 更新時間:2022年08月16日 08:52:35   作者:沉迷...  
這篇文章主要介紹了vue中環(huán)境變量的使用與配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

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

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

對應(yīng)每一個環(huán)境可能都會有所差異,比如說用戶訪問資源權(quán)限、服務(wù)器地址、接口地址等。在各個環(huán)境切換的時候,就需要不同的配置參數(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 忽略

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

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

每一個環(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.[變量名]進行訪問,從而獲取到它的值,如下:

if (isDev()) {
? ? return process.env.VUE_APP_PERMISSION === "true" ? true : false;
? }

除了 VUE_APP_ 變量之外,在你的應(yīng)用代碼中始終可用的還有兩個特殊的變量:

  • (1)NODE_ENV :會是 “development”、“production” 或 “test” 中的一個。具體的值取決于應(yīng)用運行的模式。
  • (2)BASE_URL :會和 vue.config.js 中的 publicPath 選項相符,即你的應(yīng)用會部署到的基礎(chǔ)路徑。

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

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

模式

1)模式分類

在vue-cli中默認情況下有以下三種模式

  • development 模式:用于 vue-cli-service serve
  • production 模式:用于 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式:用于 vue-cli-service test:unit

模式與環(huán)境變量不同,一個模式可包含多個環(huán)境變量(NODE_ENV),每個模式都會將NODE_ENV的值設(shè)為模式的名稱。

2)模式定義與使用

你可以通過為 .env 文件增加后綴來設(shè)置某個模式下特有的環(huán)境變量。比如,如果你在項目根目錄創(chuàng)建一個名為 .env.development 的文件,那么在這個文件里聲明過的變量就只會在 development 模式下被載入。

也可以通過傳遞 --mode 選項參數(shù)為命令行覆寫默認的模式。

例如,如果你想要在構(gòu)建命令中使用開發(fā)環(huán)境變量,則需在 package.json 腳本中設(shè)置:

"build": "vue-cli-service build --mode development"

結(jié)合實際應(yīng)用

針對我們公司的項目來說,每個項目都設(shè)置了三種模式,分別為development、production和permission。我們都知道前兩個是vue-cli項目中默認有的模式,那么permission模式便是我們在項目上自定義的,為什么要自定義這個模式呢?

作為非產(chǎn)品設(shè)計和開發(fā)人員,我們或許并不是很清楚這個模式產(chǎn)生的根本原因,那么我們先來看看項目上是怎么配置和應(yīng)用這個模式,從而來了解它的作用。

首先在package.json添加一種類型,并修改默認環(huán)境變量為permission環(huán)境變量:

在根目錄下創(chuàng)建.env.permission文件,來定義變量和值:

如上圖所示,定義了一個.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)是否開啟運維模式,即權(quán)限管理模式。當系統(tǒng)通過yarn permission命令運行時,則進入權(quán)限控制模式,需要進行登錄驗證,并根據(jù)登錄用戶獲取相應(yīng)的資源。

這里需要特別注意的是,每種環(huán)境變量只有在所對應(yīng)的模式被編譯執(zhí)行的時候才能被讀取,也就是說,如果我在permission模式下執(zhí)行編譯,那就只能讀取該模式下的變量,而不能讀取development和production或其他模式中所設(shè)置的環(huán)境變量。所以如果在開發(fā)模式下進行編譯,那么就無法讀取到permission模式下的VUE_APP_PERMISSION變量。這也保證了不同模式編譯結(jié)果的唯一性。

由此可見,當我們執(zhí)行yarn serve的時候走的是development模式,而該模式中并未定義VUE_APP_PERMISSION環(huán)境變量,所以isPermission()為false,即不走權(quán)限控制。所以如果要走權(quán)限控制,對資源進行權(quán)限管理,那么就需要對permission模式進行編譯。

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

相關(guān)文章

最新評論