vite获取所有环境变量(env)

0.环境变量文件

javascript 复制代码
API_URL=8888888
VITE_API_URL=9999999

1.定义环境变量


默认情况下,vite只获取以VITE_为前缀的环境变量。

为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

但如果你觉得你是进击的巨人,放荡不羁爱自由,可以参考如下方案直接获取所有环境变量。

javascript 复制代码
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:测试环境/正式环境/自定义环境
  • process.cwd():当前项目根目录
  • "" :加载所有环境变量

同理,既然可以暴露全部,你也可以拆分部分环境变量暴露:

javascript 复制代码
define: {
  "import.meta.env.API_URL":define["import.meta.env.API_URL"]
}

2.读取环境变量


vite客户端获取变量的方法和其他构建工具有一定差异,使用 import.meta.env.XX获取。

javascript 复制代码
console.log(import.meta.env)
相关推荐
Codebee7 分钟前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊9 分钟前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius10 分钟前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记
littleplayer12 分钟前
Redux 中›ABC三个页面是如何通信的?
前端
安卓开发者12 分钟前
鸿蒙NEXT的Web组件网络安全与隐私保护实践
前端·web安全·harmonyos
程序员NEO21 分钟前
3分钟搞定Vue组件库
前端
程序员NEO24 分钟前
WebStorm代码一键美化
前端
zzzsde31 分钟前
【Linux】初识Linux
linux·运维·服务器
fouryears_2341736 分钟前
云服务器使用代理稳定与github通信方法
运维·服务器·github
前端农民工ws1 小时前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai