快捷導(dǎo)航

Vue中.env、.env.development及.env.production文件說(shuō)明

更新時(shí)間：2022年09月20日 14:19:42 作者：學(xué)學(xué)學(xué)無(wú)止境

這篇文章主要給大家介紹了關(guān)于Vue中.env、.env.development及.env.production文件說(shuō)明的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

0.介紹

模式是Vue CLI項(xiàng)目中一個(gè)重要的概念，默認(rèn)情況下，一個(gè)Vue CLI項(xiàng)目有三種模式：

developemt 模式用于vue-cli-service serve
test 模式用于vue-cli-service test:unit
production 模式用于vue-cli-service build 和vue-cli-service test:e2e

當(dāng)運(yùn)行vue-cli-service命令時(shí)，所有的環(huán)境變量都從對(duì)應(yīng)的環(huán)境文件中載入。如果文件內(nèi)部不包含NODE_EVN變量，它的值取決于模式。例如，咋production模式下被設(shè)置為“production”，在test模式下被設(shè)置為“test”，默認(rèn)的模式則是“developemt”

NODE_EVN將決定你的應(yīng)用運(yùn)行的模式，是開發(fā)，生產(chǎn)還是測(cè)試，因此也決定了創(chuàng)建哪種webpack配置

例如通過(guò)將 NODE_ENV 設(shè)置為 "test"，Vue CLI 會(huì)創(chuàng)建一個(gè)優(yōu)化過(guò)后的，并且旨在用于單元測(cè)試的 webpack 配置，它并不會(huì)處理圖片以及一些對(duì)單元測(cè)試非必需的其他資源。

同理，NODE_ENV=development 創(chuàng)建一個(gè) webpack 配置，該配置啟用熱更新，不會(huì)對(duì)資源進(jìn)行 hash 也不會(huì)打出 vendor bundles，目的是為了在開發(fā)的時(shí)候能夠快速重新構(gòu)建。

當(dāng)你運(yùn)行 vue-cli-service build 命令時(shí)，無(wú)論你要部署到哪個(gè)環(huán)境，應(yīng)該始終把 NODE_ENV 設(shè)置為 "production" 來(lái)獲取可用于部署的應(yīng)用程序。

1.在Vue項(xiàng)目中，通常配置文件有：

env 全局默認(rèn)配置文件，無(wú)論什么環(huán)境都會(huì)加載合并
.env.development 開發(fā)環(huán)境下的配置文件
.env.production 生產(chǎn)環(huán)境下的配置文件

2.命名規(guī)則

注意：屬性名必須以VUE_APP開頭，比如VUEP_APP_XXX

3.關(guān)于文件的加載：

關(guān)于啟動(dòng)命令Vue會(huì)自動(dòng)加載對(duì)應(yīng)的環(huán)境，vue是根據(jù)文件名進(jìn)行加載的

比如當(dāng)你執(zhí)行npm run serve命令，會(huì)自動(dòng)加載.env.development文件

npm run serve ----NODE_EVN=development

注意：.env文件無(wú)論是來(lái)發(fā)還是生產(chǎn)都會(huì)加載

如上圖，如果我們運(yùn)行npm run serbe就會(huì)先加載.env文件，之后加載.env.development文件，兩個(gè)文件有同一項(xiàng)，則后加載的文件就會(huì)覆蓋掉第一個(gè)文件，即.env.development文件覆蓋掉了.env文件的NOOE_ENV選項(xiàng)

同理，如果執(zhí)行了npm run build，則就是執(zhí)行了.evn和.env.production文件

npm run build ---NODE_EVN = production

4.關(guān)于使用

直接調(diào)用process.evn屬性（全局屬性，任何地方都可以使用）

例如：直接打印process.evn屬性：

4.1 在.vue文件中使用

4.2 在.js文件中

注意：js文件中可以添加JSON.stringfy(xxx)，解析成字符，但是vue中不能

5.自定義環(huán)境

第一步：創(chuàng)建.evn.test文件

第二部：配置環(huán)境及地址

# 測(cè)試環(huán)境
NODE_ENV=production
VUE_APP_ENV=test
#請(qǐng)求接口基準(zhǔn)地址
VUE_APP_BASE_API=地址一
#業(yè)務(wù)系統(tǒng)地址
VUE_APP_protalUrl=地址二
#市門戶地址
VUE_APP_menhuUrl=地址三
#騰訊統(tǒng)計(jì)分析id
VUE_APP_sid=騰訊ID

第三步：配置package.json

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "test": "vue-cli-service build --mode test"
    },

配置完成，使用命令npm run test 即可以打包test環(huán)境的包。

最后，附上一張總結(jié)圖

總結(jié)

到此這篇關(guān)于Vue中.env、.env.development及.env.production文件說(shuō)明的文章就介紹到這了,更多相關(guān)Vue .env、.env.development及.env.production內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: