我就不讲太基础的“怎么定义变量”了，直接切入底层原理和架构设计层面，聊聊 import.meta.env 和 process.env 的本质区别。
这两者的区别，本质上是 Vite (ESM) 与 Webpack/Node (CommonJS) 两种不同构建哲学的碰撞。
核心区别一览表
为了让你一眼看清，我整理了这个对比表：
表格
| 维度 | import.meta.env | process.env |
|---|---|---|
| 所属生态 | Vite (基于 ESM 标准) | Node.js / Webpack |
| 底层原理 | 构建时静态替换 (Static Replacement) | 读取 Node 运行时对象 / Webpack 插件注入 |
| 浏览器支持 | 原生支持 (ESM 语法) | 浏览器原生不支持 (需 Polyfill 或替换) |
| 变量前缀 | 强制 VITE_ (安全白名单机制) | 无强制要求 (但在 Webpack 中需配置) |
| 类型安全 | 极佳 (TypeScript 原生支持类型提示) | 较差 (通常被视为 `string |
| 典型场景 | Vite 项目的前端代码 | Node 服务端代码 / Webpack 老项目 |
深度解析：资深前端视角的 3 个关键点
1. 编译原理：静态替换 vs 运行时对象
-
import.meta.env(Vite 的做法):
它利用了 ES Module 的import.meta属性。在 Vite 的构建过程中（无论是 dev server 还是 build），它本质上是一个编译时的字符串替换。
当你写const url = import.meta.env.VITE_API_URL时，Vite 在打包阶段直接把它替换成了const url = "https://api.example.com"。- 优势： 极致的 Tree-shaking。如果你在一个
if (import.meta.env.PROD)的分支里写了代码，打包工具（如 Rollup/esbuild）能非常确定地移除开发环境的代码，减小包体积。
- 优势： 极致的 Tree-shaking。如果你在一个
-
process.env(Webpack/Node 的做法):
在 Node 中，它是原生的全局对象。但在浏览器（Webpack）中，它是通过DefinePlugin等插件，在打包时把process.env.XXX替换成具体的值。- 痛点： 浏览器里本来没有
process对象。如果在 Vite 项目中直接用process.env，除非你手动配置 polyfill，否则会直接报错process is not defined。
- 痛点： 浏览器里本来没有
2. 安全性设计：白名单机制
这是 Vite 做得非常聪明的地方。
-
import.meta.env：Vite 默认只暴露以VITE_开头的变量给前端代码。- 这意味着，如果你在服务端有个
.env文件，里面存了DB_PASSWORD=123456，只要你没加VITE_前缀，这个变量就绝对不会被打包进前端 bundle 里。这从机制上防止了敏感信息泄露。
- 这意味着，如果你在服务端有个
-
process.env：在 Webpack 中，默认没有这种强限制。如果你不小心把AWS_SECRET_KEY通过process.env暴露给了前端，Webpack 会“忠实地”帮你把它打包进去，导致严重的安全事故。
3. 开发体验与“坑”
虽然 import.meta.env 更现代，但作为资深前端，你在迁移或使用时要注意一个极易踩坑的地方：
⚠️ 严禁使用可选链 (?.) 或动态属性访问
由于 import.meta.env 是静态替换的，Vite 必须在编译阶段就能“看懂”你要访问哪个变量。
-
✅ 正确写法：
import.meta.env.VITE_API_URL- 构建后：
"https://api.example.com"
- 构建后：
-
❌ 错误写法：
import.meta.env?.VITE_API_URL- 构建后：代码原样保留。但在生产环境构建产物中，
import.meta.env对象可能并不完整存在，导致运行时undefined报错。
- 构建后：代码原样保留。但在生产环境构建产物中，
-
❌ 错误写法：
import.meta.env[key]- 构建工具无法分析动态 key，无法进行静态替换。
总结与建议
既然你已经有了个人网站（大概率是 Vite 构建的），建议遵循以下最佳实践：
- 前端代码：坚决使用
import.meta.env，并统一加上VITE_前缀。享受它带来的 TypeScript 类型提示和 Tree-shaking 红利。 - Node/服务端代码（如果你的网站有 SSR 或 API 层）：继续使用
process.env，因为这是 Node.js 的标准，且不需要暴露给浏览器。 - 迁移老项目：如果是从 Webpack 迁移到 Vite，最痛苦的就是把所有的
process.env.VUE_APP_XXX批量替换为import.meta.env.VITE_XXX，建议写个正则脚本一键处理。
祝你的 OpenClaw 项目 Star 多多，个人网站越做越强！🚀
