快捷導(dǎo)航

vite獲取所有環(huán)境變量(env)的實現(xiàn)方法

更新時間：2024年06月18日 08:55:51 作者：一拖再拖?一拖再拖

本文主要介紹了vite獲取所有環(huán)境變量(env)的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

0.環(huán)境變量文件

API_URL=8888888
VITE_API_URL=9999999

1.定義環(huán)境變量

默認情況下，vite只獲取以VITE_為前綴的環(huán)境變量。

為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會暴露給經(jīng)過 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客戶端獲取變量的方法和其他構(gòu)建工具有一定差異，使用 import.meta.env.XX獲取。

console.log(import.meta.env)

到此這篇關(guān)于vite獲取所有環(huán)境變量(env)的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)vite獲取所有環(huán)境變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實現(xiàn)圖書管理demo詳解
這篇文章主要介紹了vue實現(xiàn)圖書管理，分享了圖書管理demo用的知識點，以及遇到問題的總結(jié)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
vue項目調(diào)試的三種方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue項目調(diào)試的三種方法,大家可以根據(jù)需要選擇調(diào)試方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2023-09-09
修改vue源碼實現(xiàn)動態(tài)路由緩存的方法
這篇文章主要介紹了修改vue源碼實現(xiàn)動態(tài)路由緩存的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題
這篇文章主要介紹了el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue element el-form 多級嵌套驗證的實現(xiàn)示例
本文主要介紹了vue element el-form 多級嵌套驗證的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue路由劃分模塊并自動引入方式
這篇文章主要介紹了vue路由劃分模塊并自動引入方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
使用konva和vue-konva庫實現(xiàn)拖拽滑塊驗證功能
這篇文章主要介紹了使用konva和vue-konva完成前端拖拽滑塊驗證功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-04-04
Vue響應(yīng)式原理的示例詳解
Vue 最獨特的特性之一，是非侵入式的響應(yīng)系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。本文將通過示例詳解Vue的響應(yīng)式原理，感興趣的可以了解一下
2022-03-03
vue實現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到
這篇文章主要介紹了vue實現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
uniapp定義new plus.nativeObj.View實現(xiàn)APP端全局彈窗功能
文章介紹了在UniApp中使用`newplus.nativeObj.View`實現(xiàn)彈窗的原因和方法,它定義了一個`AppPopupView`彈窗函數(shù),并在`main.js`中掛載到全局頁面,以便在任何地方調(diào)用,感興趣的朋友跟隨小編一起看看吧
2024-11-11