Vue中.env、.env.development及.env.production文件說明

更新時間：2022年09月20日 14:19:42 作者：學學學無止境

這篇文章主要給大家介紹了關于Vue中.env、.env.development及.env.production文件說明的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下

0.介紹

模式是Vue CLI項目中一個重要的概念，默認情況下，一個Vue CLI項目有三種模式：

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

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

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

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

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

當你運行 vue-cli-service build 命令時，無論你要部署到哪個環(huán)境，應該始終把 NODE_ENV 設置為 "production" 來獲取可用于部署的應用程序。

1.在Vue項目中，通常配置文件有：

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

2.命名規(guī)則

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

3.關于文件的加載：

關于啟動命令Vue會自動加載對應的環(huán)境，vue是根據文件名進行加載的

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

npm run serve ----NODE_EVN=development

注意：.env文件無論是來發(fā)還是生產都會加載

如上圖，如果我們運行npm run serbe就會先加載.env文件，之后加載.env.development文件，兩個文件有同一項，則后加載的文件就會覆蓋掉第一個文件，即.env.development文件覆蓋掉了.env文件的NOOE_ENV選項

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

npm run build ---NODE_EVN = production

4.關于使用

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

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

4.1 在.vue文件中使用

4.2 在.js文件中

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

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

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

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

# 測試環(huán)境
NODE_ENV=production
VUE_APP_ENV=test
#請求接口基準地址
VUE_APP_BASE_API=地址一
#業(yè)務系統(tǒng)地址
VUE_APP_protalUrl=地址二
#市門戶地址
VUE_APP_menhuUrl=地址三
#騰訊統(tǒng)計分析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)境的包。

最后，附上一張總結圖

總結

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

您可能感興趣的文章: