import.meta.env vs process.env

import.meta.env vs process.env

---

先说人话

• process.env = Node.js 的东西，浏览器里没有
• import.meta.env = Vite 给前端用的，浏览器认识

---

process.env

这货是 Node.js 的亲儿子，天生就是在服务端混的。

// 浏览器里直接报错
console.log(process.env.NODE_ENV)
// ❌ ReferenceError: process is not defined

那为什么 Webpack 项目里能用？

简单来说：Webapck 在打包的时候搞了个"小动作"，把你代码里的 process.env.XXX 直接替换成了具体的字符串。

看个例子：

// 你写的代码
const isProd = process.env.NODE_ENV === 'production'

// Webpack 打包后变成了
const isProd = 'production' === 'production'

本质上就是字符串替换，不是真的在运行时读取环境变量。

---

import.meta.env

这是 Vite 项目里的主角，基于 ESM 的 import.meta 对象。

// Vite 项目里正常使用
console.log(import.meta.env.MODE)  // development / production
console.log(import.meta.env.DEV)    // true / false
console.log(import.meta.env.PROD)   // true / false

重要前提：变量名必须以 VITE_ 开头！

# .env 文件里
VITE_API_BASE_URL=https://api.baidu.com
MY_VAR=123  # ❌ 这个不会注入到前端！

# 代码里
console.log(import.meta.env.VITE_API_BASE_URL) // ✅ 能读到
console.log(import.meta.env.MY_VAR)            // ❌ 读不到

---

他俩到底有啥区别？

	process.env	import.meta.env
谁提供的	Node.js	Vite
浏览器能用吗	不能	能
Vite 项目能用吗	不能（会报错）	能
推荐谁	后端/Node	前端

划重点

Vite 项目里，前端代码只认 import.meta.env！

你在 Vite 项目里写 process.env.XXX，浏览器会直接原地爆炸。

---

一个很多人踩的坑

❌ 错误示范：Vite 项目里用 process.env

// vite.config.js
export default defineConfig({
  apiUrl: process.env.API_URL  // ❌ 不要这样搞
})

✅ 正确姿势：

// .env
VITE_API_URL=https://api.example.com

// 代码里
const apiUrl = import.meta.env.VITE_API_URL

---

安全性问题

⚠️ 重要的事情说三遍：

前端环境变量不是秘密！不是秘密！不是秘密！

import.meta.env 里的所有变量都会被打包进 JS 文件，用户打开 DevTools Network 面板一目了然。

# ❌ 危险危险危险！
VITE_SECRET_KEY=sk-xxxxx

# ✅ 正确姿势
# 私密数据放服务端，用接口返回

---

面试加分回答

被问到这个问题时，可以这样回答：

"process.env 是 Node.js 的环境变量 API，在浏览器里本身是不存在的。Webpack 项目能用是因为构建时做了字符串替换。而 import.meta.env 是 Vite 基于 ESM 标准提供的，专门给前端用的环境变量接口，需要以 VITE_ 前缀开头才会注入。另外要特别注意，前端环境变量不是秘密，不能放敏感信息。"

---

总结

Vite 前端 → import.meta.env.VITE_*
Node 后端 → process.env.*

有问题评论区见！