欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中 process.env與process.VUE_CLI_SERVICE詳解

 更新時(shí)間：2023年05月23日 15:59:38   作者：深海藍(lán)山  
這篇文章主要介紹了vue中process.env與process.VUE_CLI_SERVICE的相關(guān)資料,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

在vue中設(shè)置環(huán)境變量離不開process.env屬性，那么如何設(shè)置自定義環(huán)境變更呢？
可以通過設(shè)置.env文件或者借助process.VUE_CLI_SERVICE來設(shè)置

process

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

process.env

process.env 屬性返回一個(gè)包含用戶環(huán)境信息的對(duì)象。而 NODE_ENV 就是其中的一個(gè)環(huán)境變量。這個(gè)變量主要用于標(biāo)識(shí)當(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)其實(shí)就是vue項(xiàng)目中的package.json中的配置內(nèi)容。

在這里插入圖片描述

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

可以通過傳遞 --mode 選項(xiàng)參數(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_開頭

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

在這里插入圖片描述

注意事項(xiàng)

當(dāng)運(yùn)行 vue-cli-service 命令時(shí)，所有的環(huán)境變量都從對(duì)應(yīng)的環(huán)境文件中載入。
如果文件內(nèi)部不包含 NODE_ENV 變量，它的值將取決于模式，例如，在 production 模式下被設(shè)置為 “production”，在 test 模式下被設(shè)置為 “test”，默認(rèn)則是 “development”
如果不配置.env.文件的話，通過設(shè)置自定義模式--mode custom來做處理時(shí)，在build時(shí)需要注意設(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論