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