vue cli4.0 如何配置環(huán)境變量
溫馨提示：本文只適用于vue-cli 3.0及以上的版本哦~
------------------正文開始------------------
開發(fā)項(xiàng)目時(shí)，經(jīng)常會(huì)需要在不同環(huán)境中切換。那么我們?nèi)绾闻渲貌煌沫h(huán)境變量呢？
為了更加方便消化本文章，建議先看下官方文檔：
看完官方的文檔如果還沒有明白，可以參考本文。
在vue-cli構(gòu)建的項(xiàng)目中，默認(rèn)有3種模式，如下圖：
我個(gè)人的理解就是：
你執(zhí)行npm run serve時(shí)，對(duì)應(yīng)的環(huán)境就是開發(fā)環(huán)境；
你執(zhí)行npm run build時(shí)，對(duì)應(yīng)的環(huán)境就是生產(chǎn)環(huán)境。
如果你開發(fā)的項(xiàng)目中，不止該3種，該咋整呢？像在我開發(fā)的項(xiàng)目中，就有本地環(huán)境(local)、開發(fā)環(huán)境(development)、測(cè)試環(huán)境(devtest)、預(yù)發(fā)布環(huán)境(beta)、生產(chǎn)環(huán)境(production)。請(qǐng)記住我括號(hào)里面的英文。
來(lái)，左邊跟我一起畫個(gè)龍，在你右邊兒畫一道彩虹~畫完了，開始進(jìn)入主題了~
------------------進(jìn)入主題------------------
1.創(chuàng)建不同環(huán)境變量文件
如官方文檔所說，通過為.env文件增加后綴來(lái)設(shè)置某個(gè)模式下特有的環(huán)境變量。我這里有5個(gè)環(huán)境，所以配置了5個(gè).env文件。如下圖：
2.給.env文件添加內(nèi)容
基本格式如下：
NODE_ENV=環(huán)境名稱VUE_APP_URL=對(duì)應(yīng)的環(huán)境地址
如我本地環(huán)境的配置就如下圖所示：
我本地是用的easy-mock模擬的數(shù)據(jù)，所以配置的地址是mock接口地址。
3.在package.json中添加不同環(huán)境對(duì)應(yīng)的執(zhí)行語(yǔ)句
如官方文檔所說，可以通過傳遞--mode來(lái)配置不同的模式。我自己的項(xiàng)目配置如下圖：
請(qǐng)注意我配置文件中的 serve與 build 。
4.使用
文件已創(chuàng)建好，配置語(yǔ)句也已寫好。怎么用它呢？
首頁(yè)你需要哪個(gè)環(huán)境，就執(zhí)行哪個(gè)環(huán)境的命令語(yǔ)句。
比如我現(xiàn)在需要local環(huán)境，就執(zhí)行npm run local-serve。如下圖所示：
然后通過process.env.NODE_ENV獲取環(huán)境名；通過process.env.VUE_APP_URL獲取環(huán)境對(duì)應(yīng)的url。
比如我們?cè)赼xios請(qǐng)求中，就可以把它的baseURL設(shè)置為process.env.VUE_APP_URL，如下圖所示：
后面的"/web"是根據(jù)我自己接口來(lái)的，你別也寫個(gè)"/web"。
如果你不確定你自己現(xiàn)在是在哪個(gè)環(huán)境變量下，可以console.log("當(dāng)前環(huán)境變量："+process.env.NODE_ENV)和console.log("當(dāng)前環(huán)境路徑："+process.env.VUE_APP_URL)看下。
像我的項(xiàng)目中就是下面這2個(gè)東東：
輸出的內(nèi)容就是.env.local文件里面配置的環(huán)境變量。
為了更好的理解，我們?cè)賵?zhí)行一條語(yǔ)句，npm run serve,看看此時(shí)的環(huán)境變量是哪個(gè)？
為什么呢？
因?yàn)閚pm run serve默認(rèn)指向.env.developement，我在里面配置的環(huán)境就是上面輸出的內(nèi)容。.env.developement的配置如下圖：
總而言之就是，你需要哪個(gè)環(huán)境變量，就 【npm run對(duì)應(yīng)的環(huán)境變量】 就完事了！
關(guān)于vue cli4.0配置環(huán)境變量就講到這里了~~以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中Rule的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue2.0項(xiàng)目中使用Ueditor富文本編輯器示例代碼
本篇文章主要介紹了vue2.0項(xiàng)目中使用Ueditor富文本編輯器示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了Vue中ref的用法及演示，ref被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息會(huì)被注冊(cè)在父組件上的$refs對(duì)象上，下面來(lái)看看文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)
這篇文章主要介紹了vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頭像上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue如何循環(huán)給對(duì)象賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue 子組件修改data或調(diào)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08
在?Vue3?中，有許多與響應(yīng)式相關(guān)的函數(shù)，例如?toRef、toRefs、isRef、unref?等等,本文將詳細(xì)介紹這些函數(shù)的用法，讓我們?cè)趯?shí)際開發(fā)中知道應(yīng)該使用哪些?API?并能夠熟練地回答面試官的相關(guān)問題2023-08-08![elementui[el-table]toggleRowSelection默認(rèn)多選事件無(wú)法選中問題](http://img.jbzj.com/images/xgimg/bcimg8.png)
elementui[el-table]toggleRowSelection默認(rèn)多選事件無(wú)法選中問題
這篇文章主要介紹了elementui[el-table]toggleRowSelection默認(rèn)多選事件無(wú)法選中問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁(yè)面及刷新方法詳解
這篇文章主要給大家介紹了關(guān)于vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁(yè)面及刷新方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05