vue中環(huán)境變量的使用與配置講解
為什么需要配置環(huán)境變量和模式呢?
所有方法肯定是來(lái)源于現(xiàn)實(shí)的需求。在一個(gè)產(chǎn)品的前端開(kāi)發(fā)過(guò)程中,一般來(lái)說(shuō)會(huì)經(jīng)歷本地開(kāi)發(fā)、測(cè)試腳本、開(kāi)發(fā)自測(cè)、測(cè)試環(huán)境、預(yù)上線環(huán)境,然后才能正式的發(fā)布。
對(duì)應(yīng)每一個(gè)環(huán)境可能都會(huì)有所差異,比如說(shuō)用戶訪問(wèn)資源權(quán)限、服務(wù)器地址、接口地址等。在各個(gè)環(huán)境切換的時(shí)候,就需要不同的配置參數(shù),所以就可以用環(huán)境變量和模式,來(lái)方便我們管理。
環(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_開(kāi)頭的變量才會(huì)被webpack.DefinePlugin靜態(tài)嵌入到客戶端側(cè)包中,如:
VUE_APP_PERMISSION = true
3)環(huán)境變量訪問(wèn)
被載入和變量將會(huì)對(duì)vue-cli-service的所有命令、插件和依賴可用。在應(yīng)用代碼中通過(guò)process.env.[變量名]進(jìn)行訪問(wè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ǔ)路徑。
所有解析出來(lái)的環(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 serveproduction
模式:用于 vue-cli-service build 和 vue-cli-service test:e2etest
模式:用于 vue-cli-service test:unit
模式與環(huán)境變量不同,一個(gè)模式可包含多個(gè)環(huán)境變量(NODE_ENV),每個(gè)模式都會(huì)將NODE_ENV的值設(shè)為模式的名稱。
2)模式定義與使用
你可以通過(guò)為 .env 文件增加后綴來(lái)設(shè)置某個(gè)模式下特有的環(huán)境變量。比如,如果你在項(xiàng)目根目錄創(chuàng)建一個(gè)名為 .env.development 的文件,那么在這個(gè)文件里聲明過(guò)的變量就只會(huì)在 development 模式下被載入。
也可以通過(guò)傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫(xiě)默認(rèn)的模式。
例如,如果你想要在構(gòu)建命令中使用開(kāi)發(fā)環(huán)境變量,則需在 package.json 腳本中設(shè)置:
"build": "vue-cli-service build --mode development"
結(jié)合實(shí)際應(yīng)用
針對(duì)我們公司的項(xiàng)目來(lái)說(shuō),每個(gè)項(xiàng)目都設(shè)置了三種模式,分別為development、production和permission。我們都知道前兩個(gè)是vue-cli項(xiàng)目中默認(rèn)有的模式,那么permission模式便是我們?cè)陧?xiàng)目上自定義的,為什么要自定義這個(gè)模式呢?
作為非產(chǎn)品設(shè)計(jì)和開(kāi)發(fā)人員,我們或許并不是很清楚這個(gè)模式產(chǎn)生的根本原因,那么我們先來(lái)看看項(xiàng)目上是怎么配置和應(yīng)用這個(gè)模式,從而來(lái)了解它的作用。
首先在package.json添加一種類型,并修改默認(rèn)環(huán)境變量為permission環(huán)境變量:
在根目錄下創(chuàng)建.env.permission文件,來(lái)定義變量和值:
如上圖所示,定義了一個(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)是否開(kāi)啟運(yùn)維模式,即權(quán)限管理模式。當(dāng)系統(tǒng)通過(guò)yarn permission命令運(yùn)行時(shí),則進(jìn)入權(quán)限控制模式,需要進(jìn)行登錄驗(yàn)證,并根據(jù)登錄用戶獲取相應(yīng)的資源。
這里需要特別注意的是,每種環(huán)境變量只有在所對(duì)應(yīng)的模式被編譯執(zhí)行的時(shí)候才能被讀取,也就是說(shuō),如果我在permission模式下執(zhí)行編譯,那就只能讀取該模式下的變量,而不能讀取development和production或其他模式中所設(shè)置的環(huán)境變量。所以如果在開(kāi)發(fā)模式下進(jìn)行編譯,那么就無(wú)法讀取到permission模式下的VUE_APP_PERMISSION變量。這也保證了不同模式編譯結(jié)果的唯一性。
由此可見(jiàn),當(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)行編譯。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用echarts實(shí)現(xiàn)立體柱形圖
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)立體柱形圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Vue+Echart實(shí)現(xiàn)利用率表盤(pán)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echart實(shí)現(xiàn)利用率表盤(pán)的效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2023-04-04vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小完整代碼
這篇文章主要給大家介紹了關(guān)于vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小的相關(guān)資料,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12vue實(shí)現(xiàn)一個(gè)矩形標(biāo)記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)矩形標(biāo)記區(qū)域 rectangle marker的方法,幫助大家實(shí)現(xiàn)區(qū)域標(biāo)記功能,感興趣的朋友可以了解下2020-10-10Vue開(kāi)發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue開(kāi)發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08vue計(jì)算屬性computed、事件、監(jiān)聽(tīng)器watch的使用講解
今天小編就為大家分享一篇關(guān)于vue計(jì)算屬性computed、事件、監(jiān)聽(tīng)器watch的使用講解,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-01-01Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解
這篇文章主要介紹了Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08vant-ui組件調(diào)用Dialog彈窗異步關(guān)閉操作
這篇文章主要介紹了vant-ui組件調(diào)用Dialog彈窗異步關(guān)閉操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11