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 serveproduction
模式:用于 vue-cli-service build 和 vue-cli-service test:e2etest
模式:用于 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)文章
Vue+Echart實現(xiàn)利用率表盤效果的示例代碼
這篇文章主要為大家詳細介紹了Vue如何利用Echart實現(xiàn)利用率表盤的效果,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的可以參考一下2023-04-04vue前端獲取/切換麥克風、播放采集音頻和采集音量大小完整代碼
這篇文章主要給大家介紹了關(guān)于vue前端獲取/切換麥克風、播放采集音頻和采集音量大小的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12vue實現(xiàn)一個矩形標記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實現(xiàn)一個矩形標記區(qū)域 rectangle marker的方法,幫助大家實現(xiàn)區(qū)域標記功能,感興趣的朋友可以了解下2020-10-10Vue開發(fā)環(huán)境中修改端口號的實現(xiàn)方法
這篇文章主要介紹了Vue開發(fā)環(huán)境中修改端口號的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-08-08vue計算屬性computed、事件、監(jiān)聽器watch的使用講解
今天小編就為大家分享一篇關(guān)于vue計算屬性computed、事件、監(jiān)聽器watch的使用講解,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-01-01Vue向下滾動加載更多數(shù)據(jù)scroll案例詳解
這篇文章主要介紹了Vue向下滾動加載更多數(shù)據(jù)scroll案例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-08-08vant-ui組件調(diào)用Dialog彈窗異步關(guān)閉操作
這篇文章主要介紹了vant-ui組件調(diào)用Dialog彈窗異步關(guān)閉操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11