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)
相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
Two_brushes.5 小时前
【Linux】线程机制深度实践:创建、等待、互斥与同步
linux·运维·服务器·多线程
阿芯爱编程7 小时前
2025前端面试题
前端·面试
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴9 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
wanhengidc10 小时前
UDP服务器的优缺点都包含哪些?
服务器·网络协议·udp
chao_78910 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript