vue項(xiàng)目多環(huán)境配置得方法

這篇文章主要介紹“vue項(xiàng)目多環(huán)境配置得方法”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vue項(xiàng)目多環(huán)境配置得方法”文章能幫助大家解決問(wèn)題。

什么是多環(huán)境配置,為什么要多環(huán)境配置?

最常見(jiàn)的多環(huán)境配置，就是開(kāi)發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置(也就是上線的配置)，很多情況下我們開(kāi)發(fā)環(huán)境下的域名，和一些配置項(xiàng),和我們生產(chǎn)模式下的不同，這個(gè)時(shí)候就需要我們進(jìn)行多環(huán)境配置，不然每次發(fā)版都要改一波數(shù)據(jù)多麻煩。另一種情況就是你兩個(gè)項(xiàng)目是用的一套代碼，但是最后又要分別打成不同的包，那么這個(gè)時(shí)候多環(huán)境配置就大大提升了開(kāi)發(fā)效率。

.env 文件配置到哪里

.env文件配置在你項(xiàng)目的根目錄里面和package.json同級(jí)如下圖。

.env文件如何配置，配置多少個(gè)？

.env文件如何命名？
最開(kāi)始我在網(wǎng)上查的時(shí)候好多博主說(shuō)名字必須命名成
.env.development 開(kāi)發(fā)環(huán)境下的配置文件
.env.production 生產(chǎn)環(huán)境下的配置文件
其實(shí)不是的，如果你配置的是開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境那么這樣命名，無(wú)可厚非，但是你如果是多項(xiàng)目公用代碼，這樣命名就有點(diǎn)驢頭不對(duì)馬嘴。所以這塊的命名格式只需要文件開(kāi)頭為.env即可，后面的名字你想怎樣都可以。

.env文件的配置

這塊就是你想用什么東西就配置什么東西，打個(gè)比方我想在項(xiàng)目全局拿到一個(gè)名字，那你就直接.env里面配置就ok了，下面我會(huì)詳細(xì)敘述如何取值。

npm run serve 或者npm run build 的時(shí)候，會(huì)默認(rèn)走.env的配置

圖示：

//這塊只需要 VUE_APP_*** 以這樣的形式命名就ok了，后面大寫(xiě)還是小寫(xiě)這塊看你心情都可以。
VUE_APP_NAME = "婁淵洋"
VUE_APP_HTTPS = "http://www.louhc.com/"
VUE_APP_ABBREVIATION = "louhc"
VUE_APP_LOGO = "louhc"

默認(rèn)的.env文件配置好后，我們接著配置有特殊需求的.env文件，比如我想讓在另一種環(huán)境下使用 其他的名字。例如 .env.bsy文件 .bsy是我隨便寫(xiě)的名字這塊可以自定義。

//這塊只需要 VUE_APP_*** 以這樣的形式命名就ok了，后面大寫(xiě)還是小寫(xiě)這塊看你心情都可以。
VUE_APP_NAME = "白衫云"
VUE_APP_HTTPS = "http://www.louhc.com:82/"
VUE_APP_ABBREVIATION = "bsy"
VUE_APP_LOGO = "bsy"

依次類推你想配置多少個(gè)都可以
.env文件配好后我們就該配置運(yùn)行環(huán)境了

如何配置運(yùn)行環(huán)境

找到package.json文件，如下圖

build: 和 serve: 后面跟的名字就是你隨便起的名字一定要對(duì)應(yīng)上，這在運(yùn)行的時(shí)候才能找到相應(yīng)的配置項(xiàng)。

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:bsy": "vue-cli-service build --mode bsy",
    "build:kthz": "vue-cli-service build --mode kthz",
    "serve:bsy": "vue-cli-service serve --mode bsy",
    "serve:kthz": "vue-cli-service serve --mode kthz",
  },

再次多說(shuō)一點(diǎn)：.env是默認(rèn)配置項(xiàng)，當(dāng)運(yùn)行環(huán)境配置項(xiàng)的時(shí)候，會(huì)將默認(rèn)配置項(xiàng)和運(yùn)行的環(huán)境配置項(xiàng)融合，在參數(shù)相同的情況下，會(huì)以環(huán)境配置項(xiàng)為主，簡(jiǎn)單來(lái)說(shuō)就是，默認(rèn)配置項(xiàng)存在，環(huán)境配置項(xiàng)也存在，這個(gè)時(shí)候運(yùn)行哪個(gè)環(huán)境配置項(xiàng)，就以哪個(gè)環(huán)境配置項(xiàng)的值為準(zhǔn)，如果默認(rèn)配置項(xiàng)存在，環(huán)境配置項(xiàng)不存在，那么運(yùn)行環(huán)境配置項(xiàng)的時(shí)候同樣也可以拿到默認(rèn)配置項(xiàng)的值。

如何獲取全局配置項(xiàng)的值

例子：如何我想在js中拿到 VUE_APP_NAME = ‘婁淵洋"，那么這直接在你想賦值的地方寫(xiě)上這行代碼即可 process.env.VUE_APP_NAME

console.log(process.env.VUE_APP_NAME)// 默認(rèn)環(huán)境下打印的就是婁淵洋 bsy 環(huán)境下就是 白衫云

如果我們項(xiàng)在html中使用全局配置項(xiàng)的值，需要我們先在return 中賦值一下，然后 才可以通過(guò) {{}}，拿到你想要用的值。

如何運(yùn)行環(huán)境

運(yùn)行默認(rèn)環(huán)境 npm run serve
運(yùn)行指定的環(huán)境 npm run serve:bsy
默認(rèn)環(huán)境打包 npm run build
指定環(huán)境打包 npm run build:bsy
只需切換不同的環(huán)境名即可

關(guān)于“vue項(xiàng)目多環(huán)境配置得方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。