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

process

process 對象是一個 global （全局變量），提供有關信息，控制當前 Node.js 進程。作為一個對象，它對于 Node.js 應用程序始終是可用的。

process.env

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

process.VUE_CLI_SERVIC

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

在 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 選項參數為命令行覆寫默認的模式

"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)地嵌入到客戶端側的代碼中。這是為了避免意外公開機器上可能具有相同名稱的私鑰。
如果是vue3+vite 必須使用VITE開頭的配置信息 否則無法獲取，示例：VITE_NODE_BUILD = “test”

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

對應關系圖所示

注意事項

當運行 vue-cli-service 命令時，所有的環(huán)境變量都從對應的環(huán)境文件中載入。
如果文件內部不包含 NODE_ENV 變量，它的值將取決于模式，例如，在 production 模式下被設置為 “production”，在 test 模式下被設置為 “test”，默認則是 “development”
如果不配置.env.文件的話，通過設置自定義模式--mode custom來做處理時，在build時需要注意設置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'

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

最新評論