1. 项目背景与核心痛点
去年接手一个企业级后台管理系统重构时,我们团队首次全面采用Vite作为构建工具。在对接不同环境(开发/测试/生产)的过程中,遇到了一个看似简单却困扰团队两周的问题:如何在构建时动态注入环境变量,同时避免敏感信息泄露?
传统Webpack项目中我们习惯使用process.env直接访问环境变量,但Vite的设计哲学完全不同。其ESM原生特性导致process对象不可用,而官方文档对环境变量处理的说明又过于简略。更棘手的是,项目需要区分:
- 构建时变量(如API基础路径)
- 运行时变量(如用户权限标识)
- 敏感变量(如密钥)
- 非敏感变量(如功能开关)
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境变量处理机制深度解析
2.1 Vite环境变量设计原理
Vite的环境变量处理建立在两个关键设计上:
- 编译时替换:以
VITE_开头的变量会被静态替换 - 安全隔离:非
VITE_前缀变量不会暴露给客户端
bash复制# .env.production
VITE_API_BASE=https://api.example.com
INTERNAL_TOKEN=secret123 # 不会出现在客户端
2.2 动态配置的三种实现路径
经过多次验证,我们总结出三种可行方案:
| 方案 | 适用场景 | 安全性 | 构建影响 |
|---|---|---|---|
| 编译时替换 | 固定环境配置 | 高 | 需重新构建 |
| 运行时接口获取 | 频繁变动的配置 | 依赖接口防护 | 无 |
| 配置文件动态加载 | 需要即时生效的非敏感配置 | 中 | 无 |
3. 实战:安全注入非敏感变量
3.1 基础配置方案
在vite.config.ts中通过define选项实现类型安全的变量注入:
typescript复制// vit
