如何在vite里獲取env環(huán)境變量淺析
.env環(huán)境配置文件
在項(xiàng)目中總會(huì)遇到一些默認(rèn)的配置,需要我們配置到靜態(tài)文件中方便我們?nèi)カ@取,這時(shí)候就可以用到這個(gè).env環(huán)境變量文件,在cli創(chuàng)建的項(xiàng)目中頂層的nodejs會(huì)有一個(gè)process對象,這個(gè)對象可以根據(jù)不同的環(huán)境獲取不同的環(huán)境配置文件,但是,在vite里面無法使用process對象,通過研究,在vite里使用環(huán)境變量更加簡便
在cli項(xiàng)目中我們可以是配置.env.[mode]文件來配置環(huán)境變量
代碼展示。
ENV='development' # base api VUE_APP_BASE_URL='www.baidu.com' VUE_APP_BASE_NAME='VUE項(xiàng)目'
ENV='development' # base api VUE_APP_BASE_URL='www.baidu.com' VUE_APP_BASE_NAME='VUE項(xiàng)目'
注意：屬性名必須以 VUE_APP_ 開頭，如：VUE_APP_XXX
在cli項(xiàng)目中使用.env.[mode]
可以在js文件中是用process.env來獲取環(huán)境配置。
//code process.env
// An highlighted block let baseURL = process.env.VUE_APP_BASE_API;
在vite中使用.env文件
Vite 在一個(gè)特殊的 import.meta.env 對象上暴露環(huán)境變量。這里有一些在所有情況下都可以使用的內(nèi)建變量：
- import.meta.env.MODE: {string} 應(yīng)用運(yùn)行的模式。
- import.meta.env.BASE_URL: {string} 部署應(yīng)用時(shí)的基本 URL。他由base 配置項(xiàng)決定。
- import.meta.env.PROD: {boolean} 應(yīng)用是否運(yùn)行在生產(chǎn)環(huán)境。
- import.meta.env.DEV: {boolean} 應(yīng)用是否運(yùn)行在開發(fā)環(huán)境 (永遠(yuǎn)與import.meta.env.PROD相反)。
為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會(huì)暴露給經(jīng)過 vite 處理的代碼
代碼展示。
ENV='development' # base api VITE_APP_BASE_URL='http://10.243.11.35:7200/' VITE_APP_BASE_NAME='vite項(xiàng)目'
ENV='development' # base api VITE_APP_BASE_URL='http://10.243.11.35:7200/' VITE_APP_BASE_NAME='vite項(xiàng)目'
console.log(import.meta.env)
打印結(jié)果如下
vite使用環(huán)境配置的具體文檔參考vite官網(wǎng)鏈接: https://vitejs.cn/guide/env-and-mode.html
總結(jié)
到此這篇關(guān)于如何在vite里獲取env環(huán)境變量的文章就介紹到這了,更多相關(guān)vite獲取env環(huán)境變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目中如何配置env環(huán)境的實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目中如何配置env環(huán)境的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式
今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue學(xué)習(xí)筆記之給組件綁定原生事件操作示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之給組件綁定原生事件操作,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件綁定原生事件相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
Python實(shí)現(xiàn)圖片二值化的詳細(xì)代碼
圖像二值化就是將圖像上的像素點(diǎn)的“灰度值”設(shè)置為[0,?0,?0]或[255,?255,?255],即要么純黑,要么純白,這篇文章主要介紹了Python實(shí)現(xiàn)圖片二值化,需要的朋友可以參考下2024-05-05
vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問路徑
這篇文章主要介紹了vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問路徑,vue項(xiàng)目的最終項(xiàng)目文件需要經(jīng)過打包輸出,靜態(tài)文件的訪問路徑需要在vue.config.js文件中設(shè)置,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue的ElementUI表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法
我們經(jīng)常需要接入統(tǒng)計(jì)服務(wù)以方便運(yùn)營，這篇文章主要介紹了Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
本文主要介紹了el-table嵌套el-popover處理卡頓的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue項(xiàng)目兩種方式實(shí)現(xiàn)豎向表格的思路分析
這篇文章主要介紹了vue項(xiàng)目兩種方式實(shí)現(xiàn)豎向表格的思路分析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號
這篇文章主要介紹了vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05