快捷導(dǎo)航

vue中 process.env與process.VUE_CLI_SERVICE詳解

更新時間：2023年05月23日 15:59:38 作者：深海藍(lán)山

這篇文章主要介紹了vue中process.env與process.VUE_CLI_SERVICE的相關(guān)資料,本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

process

process 對象是一個 global （全局變量），提供有關(guān)信息，控制當(dāng)前 Node.js 進(jìn)程。作為一個對象，它對于 Node.js 應(yīng)用程序始終是可用的。

process.env

process.env 屬性返回一個包含用戶環(huán)境信息的對象。而 NODE_ENV 就是其中的一個環(huán)境變量。這個變量主要用于標(biāo)識當(dāng)前的環(huán)境（生產(chǎn)環(huán)境，開發(fā)環(huán)境）。相關(guān)屬性可參考下圖所示

在這里插入圖片描述

process.VUE_CLI_SERVIC

VUE_CLI_SERVIC是Vue CLI提供的，查看process.VUE_CLI_SERVIC屬性，可以發(fā)現(xiàn)其實就是vue項目中的package.json中的配置內(nèi)容。

在這里插入圖片描述

在 Vue 中， NODE_ENV 可以通過 .env 文件或者 .env.[mode] 文件配置。配置過后，運行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）時，就會將該模式下的NODE_ENV載入其中了。
development 模式 -----process.env.NODE_ENV為development
test 模式 ------------------process.env.NODE_ENV為test
production 模式 --------process.env.NODE_ENV為production

可以通過傳遞 --mode 選項參數(shù)為命令行覆寫默認(rèn)的模式

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

.vnv.test文件
自定義的變量必須以 VUE_APP_ 開頭只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。這是為了避免意外公開機(jī)器上可能具有相同名稱的私鑰。
如果是vue3+vite 必須使用VITE開頭的配置信息否則無法獲取，示例：VITE_NODE_BUILD = “test”

//.vnv.test文件
NODE_ENV=production
VUE_APP_MODE=production
VUE_APP_BUILD=test // 自定義環(huán)境變更必須用VUE_APP_開頭

對應(yīng)關(guān)系圖所示

在這里插入圖片描述

注意事項

當(dāng)運行 vue-cli-service 命令時，所有的環(huán)境變量都從對應(yīng)的環(huán)境文件中載入。
如果文件內(nèi)部不包含 NODE_ENV 變量，它的值將取決于模式，例如，在 production 模式下被設(shè)置為 “production”，在 test 模式下被設(shè)置為 “test”，默認(rèn)則是 “development”
如果不配置.env.文件的話，通過設(shè)置自定義模式--mode custom來做處理時，在build時需要注意設(shè)置NODE_ENV 為 production,否則不能正常打包

const mode = process.VUE_CLI_SERVICE.mode === 'development' ? 'development' : 'production'
process.env.NODE_ENV = mode
process.env.VUE_APP_MODE = mode
let publicPath =process.VUE_CLI_SERVICE.mode === 'test' ? '/ag-collect-server-springcloud' : '/ag-collect'

到此這篇關(guān)于vue中 process.env與process.VUE_CLI_SERVICE的文章就介紹到這了,更多相關(guān)vue中 process.env與process.VUE_CLI_SERVICE內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: