vue cli4.0 如何配置環(huán)境變量
溫馨提示：本文只適用于vue-cli 3.0及以上的版本哦~
------------------正文開(kāi)始------------------
開(kāi)發(fā)項(xiàng)目時(shí)，經(jīng)常會(huì)需要在不同環(huán)境中切換。那么我們?nèi)绾闻渲貌煌沫h(huán)境變量呢？
為了更加方便消化本文章，建議先看下官方文檔：
看完官方的文檔如果還沒(méi)有明白，可以參考本文。
在vue-cli構(gòu)建的項(xiàng)目中，默認(rèn)有3種模式，如下圖：
我個(gè)人的理解就是：
你執(zhí)行npm run serve時(shí)，對(duì)應(yīng)的環(huán)境就是開(kāi)發(fā)環(huán)境；
你執(zhí)行npm run build時(shí)，對(duì)應(yīng)的環(huán)境就是生產(chǎn)環(huán)境。
如果你開(kāi)發(fā)的項(xiàng)目中，不止該3種，該咋整呢？像在我開(kāi)發(fā)的項(xiàng)目中，就有本地環(huán)境(local)、開(kāi)發(fā)環(huán)境(development)、測(cè)試環(huán)境(devtest)、預(yù)發(fā)布環(huán)境(beta)、生產(chǎn)環(huán)境(production)。請(qǐng)記住我括號(hào)里面的英文。
來(lái)，左邊跟我一起畫(huà)個(gè)龍，在你右邊兒畫(huà)一道彩虹~畫(huà)完了，開(kāi)始進(jìn)入主題了~
------------------進(jìn)入主題------------------
1.創(chuàng)建不同環(huán)境變量文件
如官方文檔所說(shuō)，通過(guò)為.env文件增加后綴來(lái)設(shè)置某個(gè)模式下特有的環(huán)境變量。我這里有5個(gè)環(huán)境，所以配置了5個(gè).env文件。如下圖：
2.給.env文件添加內(nèi)容
基本格式如下：
NODE_ENV=環(huán)境名稱(chēng)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ǔ)句
如官方文檔所說(shuō)，可以通過(guò)傳遞--mode來(lái)配置不同的模式。我自己的項(xiàng)目配置如下圖：
請(qǐng)注意我配置文件中的 serve與 build 。
4.使用
文件已創(chuàng)建好，配置語(yǔ)句也已寫(xiě)好。怎么用它呢？
首頁(yè)你需要哪個(gè)環(huán)境，就執(zhí)行哪個(gè)環(huán)境的命令語(yǔ)句。
比如我現(xiàn)在需要local環(huán)境，就執(zhí)行npm run local-serve。如下圖所示：
然后通過(guò)process.env.NODE_ENV獲取環(huán)境名；通過(guò)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)的，你別也寫(xiě)個(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實(shí)現(xiàn)簡(jiǎn)易音樂(lè)播放器
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)易音樂(lè)播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要給大家介紹了關(guān)于vue單文件中引用路徑處理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue的axios和mock.js，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
Vue開(kāi)發(fā)實(shí)現(xiàn)吸頂效果的示例代碼
這篇文章主要介紹了Vue開(kāi)發(fā)實(shí)現(xiàn)吸頂效果的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue.js 中的組件，需要的朋友參考下2018-02-02
Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用
這篇文章主要為大家介紹了Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue中的axios配置及接口請(qǐng)求路徑api配置
這篇文章主要介紹了vue中的axios配置及接口請(qǐng)求路徑api配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問(wèn)題的解決方法
這篇文章主要介紹了SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問(wèn)題,需要的朋友可以參考下2018-01-01
使用md5在vue中的axios請(qǐng)求時(shí)加密API問(wèn)題
這篇文章主要介紹了使用md5在vue中的axios請(qǐng)求時(shí)加密API問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue-Ant Design Vue-普通及自定義校驗(yàn)實(shí)例
這篇文章主要介紹了Vue-Ant Design Vue-普通及自定義校驗(yàn)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10