快捷導(dǎo)航

如何在vite里獲取env環(huán)境變量淺析

更新時(shí)間：2022年10月13日 09:03:17 作者：茉莉蜜猹

開(kāi)發(fā)中經(jīng)常會(huì)使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關(guān)于如何在vite里獲取env環(huán)境變量的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

.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對(duì)象,這個(gè)對(duì)象可以根據(jù)不同的環(huán)境獲取不同的環(huán)境配置文件,但是,在vite里面無(wú)法使用process對(duì)象,通過(guò)研究,在vite里使用環(huán)境變量更加簡(jiǎn)便

在cli項(xiàng)目中我們可以是配置.env.[mode]文件來(lái)配置環(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_ 開(kāi)頭，如：VUE_APP_XXX

在cli項(xiàng)目中使用.env.[mode]

可以在js文件中是用process.env來(lái)獲取環(huán)境配置。

//code
process.env

// An highlighted block
let baseURL = process.env.VUE_APP_BASE_API;

在vite中使用.env文件

Vite 在一個(gè)特殊的 import.meta.env 對(duì)象上暴露環(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)行在開(kāi)發(fā)環(huán)境 (永遠(yuǎn)與import.meta.env.PROD相反)。

為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會(huì)暴露給經(jīng)過(guò) 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)境變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中如何配置env環(huán)境的實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目中如何配置env環(huán)境的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式
今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
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)文件訪問(wèn)路徑
這篇文章主要介紹了vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問(wèn)路徑,vue項(xiàng)目的最終項(xiàng)目文件需要經(jīng)過(guò)打包輸出,靜態(tài)文件的訪問(wèn)路徑需要在vue.config.js文件中設(shè)置,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
vue基礎(chǔ)之ElementUI表格詳解
這篇文章主要為大家詳細(xì)介紹了vue的ElementUI表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法
我們經(jīng)常需要接入統(tǒng)計(jì)服務(wù)以方便運(yùn)營(yíng)，這篇文章主要介紹了Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
el-table嵌套el-popover處理卡頓的解決
本文主要介紹了el-table嵌套el-popover處理卡頓的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
vue項(xiàng)目?jī)煞N方式實(shí)現(xiàn)豎向表格的思路分析
這篇文章主要介紹了vue項(xiàng)目?jī)煞N方式實(shí)現(xiàn)豎向表格的思路分析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)
這篇文章主要介紹了vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05