vite獲取所有環(huán)境變量(env)的實(shí)現(xiàn)方法
更新時(shí)間：2024年06月18日 08:55:51 作者：一拖再拖?一拖再拖
本文主要介紹了vite獲取所有環(huán)境變量(env)的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
0.環(huán)境變量文件
API_URL=8888888 VITE_API_URL=9999999
1.定義環(huán)境變量
默認(rèn)情況下，vite只獲取以VITE_為前綴的環(huán)境變量。
為了防止意外地將一些環(huán)境變量泄漏到客戶(hù)端，只有以 VITE_ 為前綴的變量才會(huì)暴露給經(jīng)過(guò) vite 處理的代碼
但如果你覺(jué)得你是進(jìn)擊的巨人，可以參考如下方案直接獲取所有環(huán)境變量。
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '')
// 如果你用的ts，請(qǐng)使用 let define: { [key: string]: string } = {};
let define = {};
Object.keys(env).forEach(key => {
define[`import.meta.env.${key}`] = JSON.stringify(env[key])
})
return {
//.....
define: {
...define
}
}
})
- mode：測(cè)試環(huán)境/正式環(huán)境/自定義環(huán)境
- process.cwd()：當(dāng)前項(xiàng)目根目錄
- “” ：加載所有環(huán)境變量
同理，既然可以暴露全部，你也可以拆分部分環(huán)境變量暴露：
define: {
"import.meta.env.API_URL":define["import.meta.env.API_URL"]
}
2.讀取環(huán)境變量
vite客戶(hù)端獲取變量的方法和其他構(gòu)建工具有一定差異，使用 import.meta.env.XX獲取。
console.log(import.meta.env)
到此這篇關(guān)于vite獲取所有環(huán)境變量(env)的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vite獲取所有環(huán)境變量 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Element-ui DatePicker顯示周數(shù)的方法示例
這篇文章主要介紹了Element-ui DatePicker顯示周數(shù)的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
使用 vue.js 構(gòu)建大型單頁(yè)應(yīng)用
本文給大家詳細(xì)介紹了如何使用使用 vue.js腳手架工具vue-cli構(gòu)建大型單頁(yè)應(yīng)用的方法，非常的實(shí)用，有需要的小伙伴可以參考下2018-02-02
Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼
菜單管理是一個(gè)對(duì)菜單樹(shù)結(jié)構(gòu)的增刪改查操作，這篇文章主要介紹了Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼,需要的朋友可以參考下2022-02-02
vue中mock數(shù)據(jù),模擬后臺(tái)接口實(shí)例
這篇文章主要介紹了vue中mock數(shù)據(jù),模擬后臺(tái)接口實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中Mustache插值語(yǔ)法與v-bind指令詳解
在Vue中通過(guò)Mustache語(yǔ)法（雙大括號(hào)）將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關(guān)于Vue中Mustache插值語(yǔ)法與v-bind指令的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
解決vue打包后刷新頁(yè)面報(bào)錯(cuò)：Unexpected token <
這篇文章主要介紹了解決vue打包后刷新頁(yè)面報(bào)錯(cuò)：Unexpected token <相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。2019-08-08
Vue2.0權(quán)限樹(shù)組件實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家介紹了Vue2.0權(quán)限樹(shù)組件實(shí)現(xiàn)代碼，需要的的朋友參考下吧2017-08-08
文章詳細(xì)分析了Vue項(xiàng)目中靜態(tài)資源路徑失效的問(wèn)題,包括開(kāi)發(fā)、構(gòu)建、部署等階段的常見(jiàn)原因,并提供了多種解決方案,旨在幫助開(kāi)發(fā)者系統(tǒng)性地解決靜態(tài)資源路徑問(wèn)題,構(gòu)建穩(wěn)定可靠的前端應(yīng)用,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了VUE腳手架下載和配置，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue作用域插槽詳解、slot、v-slot、slot-scope
這篇文章主要介紹了vue作用域插槽詳解、slot、v-slot、slot-scope，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03