vue?cli4.0怎么配置環(huán)境變量

這篇文章將為大家詳細(xì)講解有關(guān)vue cli4.0怎么配置環(huán)境變量，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在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)境變量”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。