Vue項(xiàng)目中沒(méi)有設(shè)置process.env但是還是可以獲取到的原因分析及解決方案
雖然沒(méi)有在 Vue 項(xiàng)目中顯式設(shè)置 process.env，但依然能獲取到一些 process.env.xxx，是因?yàn)椋?/p>
原因：Vue CLI 或 Vite 在構(gòu)建時(shí)自動(dòng)注入了環(huán)境變量
Vue CLI 項(xiàng)目（使用 webpack）
Vue CLI 默認(rèn)會(huì)在構(gòu)建過(guò)程中注入所有以 VUE_APP_ 開頭的 .env 變量，還有幾個(gè)內(nèi)建變量：
process.env.NODE_ENV：當(dāng)前構(gòu)建環(huán)境（如development、production），始終可用process.env.BASE_URL：基礎(chǔ)路徑process.env.VUE_APP_*：你自定義的變量（例如：VUE_APP_API_URL）
Vite 項(xiàng)目
Vite 的環(huán)境變量行為稍有不同：
.env中的所有變量會(huì)自動(dòng)注入import.meta.env中- 但只有以
VITE_開頭的變量才會(huì)暴露到客戶端代碼中
# .env VITE_API_URL=https://api.example.com
在代碼中：
// 對(duì)于 Vue + Vite 項(xiàng)目 console.log(import.meta.env.VITE_API_URL);
為什么還能用 process.env？
在 Vite 項(xiàng)目中，Vite 會(huì)模擬 process.env.NODE_ENV 供部分工具兼容，你可能還能訪問(wèn)：
console.log(process.env.NODE_ENV); // 'development' | 'production'
但其他自定義變量不會(huì)自動(dòng)掛載到 process.env 中。
如何正確使用？ Vue CLI：
VUE_APP_API_URL=https://example.com
console.log(process.env.VUE_APP_API_URL);
Vite：
VITE_API_URL=https://example.com
console.log(import.meta.env.VITE_API_URL);
?? 總結(jié)
| 構(gòu)建工具 | 環(huán)境變量寫法 | 獲取方式 |
|---|---|---|
| Vue CLI | VUE_APP_ | process.env.VUE_APP_XXX |
| Vite | VITE_ | import.meta.env.VITE_XXX |
| 內(nèi)建變量 | NODE_ENV | 都能訪問(wèn)到（Vite 模擬） |
到此這篇關(guān)于Vue項(xiàng)目中沒(méi)有設(shè)置process.env但是還是可以獲取到的原因分析及解決方案的文章就介紹到這了,更多相關(guān)Vue沒(méi)有設(shè)置process.env但是還是可以獲取內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue-DPlayer是一個(gè)易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細(xì)使用,本文將從四個(gè)方面對(duì)Vue-DPlayer進(jìn)行詳細(xì)的闡述,感興趣的朋友一起看看吧2023-10-10
Vue監(jiān)控路由與路由參數(shù), 刷新當(dāng)前頁(yè)面數(shù)據(jù)的方法匯總
這篇文章主要介紹了Vue監(jiān)控路由與路由參數(shù), 刷新當(dāng)前頁(yè)面數(shù)據(jù)的幾種方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了vue源碼解析之事件機(jī)制原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
最近接了一個(gè)移動(dòng)端的項(xiàng)目，實(shí)現(xiàn)微信掃碼功能，今天小編利用這個(gè)平臺(tái)給大家分享vue實(shí)現(xiàn)二維碼掃描功能的實(shí)現(xiàn)代碼，需要的朋友參考下吧2021-08-08
這篇文章主要介紹了在vue項(xiàng)目中封裝echarts的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue項(xiàng)目中如何調(diào)用多個(gè)不同的ip接口
這篇文章主要介紹了vue項(xiàng)目中如何調(diào)用多個(gè)不同的ip接口，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue-cli axios請(qǐng)求方式及跨域處理問(wèn)題
這篇文章主要介紹了vue-cli axios請(qǐng)求方式及跨域處理問(wèn)題,文中還給大家提到了vue中axios解決跨域問(wèn)題和攔截器使用，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03
vue跳轉(zhuǎn)時(shí)根據(jù)url錨點(diǎn)(#xxx)實(shí)現(xiàn)頁(yè)面內(nèi)容定位的方法
本前端仔在做頁(yè)面跳轉(zhuǎn)的時(shí)候,被要求跳轉(zhuǎn)到頁(yè)面時(shí)候,把對(duì)應(yīng)部分的內(nèi)容自動(dòng)滾動(dòng)到頂部,我一開始想到的就是根據(jù)錨點(diǎn)<a href="#xxid">進(jìn)行處理,但是發(fā)現(xiàn)不太好實(shí)現(xiàn),于是便自己研究了一個(gè)比較取巧的方法,需要的朋友可以參考下2024-04-04
vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例
下面小編就為大家分享一篇vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了Vuex入門之Module使用詳解,由于使用單一狀態(tài)樹,應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象,當(dāng)應(yīng)用變得非常復(fù)雜時(shí),store?對(duì)象就有可能變得相當(dāng)臃腫,需要的朋友可以參考下2023-11-11