import.meta.env 与 process.env：前端开发中的环境变量解析

在现代前端开发中，环境变量的管理变得越来越重要。尤其是在使用诸如 Vite、Webpack 等构建工具，以及 Node.js、SSR等技术时我们经常会遇到 import.meta.env 和 process.env 这两个概念。本文将深入探讨这两者之间的区别，帮助开发者geng好地理解和应用它们。

process.env 是 Node.js 中的一个核心概念，用于访问当前进程的环境变量。它是 Node.js 的一部分，因此在浏览器环境中不可直接使用。

import.meta.env 则是 Vite提供的一个特性，用于在前端代码中访问环境变量。它是在构建期注入的，允许开发者根据不同的环境配置不同的变量。

hen多开发者误以为在使用 SSR 时Ke以直接在前端代码中使用 process.env 来访问服务器环境变量。实际上，这是不安全的，也是不正确的。因为 SSR 只是让前端代码在服务器上预先渲染一次但Zui终执行的仍然是浏览器端的代码。

// 错误示例：直接在前端代码中使用 process.env
console.log; // ❌
// 正确Zuo法：敏感信息只在 Node 端处理
// server.ts / entry-server.ts
const dbPassword = process.env.DB_PASSWORD; // ✔️ 真实运行时读取

import.meta.env 中的变量是在构建期注入的，这意味着它们会被打包进前端代码中。因此，不要将敏感信息放在这里。

// .env 文件示例
VITE_API_URL=https://api.example.com // 公开配置
// 而不是这样：
VITE_DB_PASSWORD=your_password // ❌ 错误，敏感信息不应暴露在前端

Vite + SSR：清晰区分 Node 端与浏览器端环境变量的使用边界。

✔️ 例如在 Nuxt 中，前端代码应仅访问以VITE_*为名的环境变量，而敏感配置必须仅存在于process.env.* , 并通过 API 或其他服务端接口间接暴露给前端.

# .env 文件示例，保持敏感信息安全：切勿以 VITE_ 开头！否则将被打包进客户端 JS！ 👇 错误示例 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ .env.production  VITE_DB_PASSWORD=xxxxxx_API_KEY=xxxxxxSECRET_TOKEN=xxxxxx 🔴 编译时会打进 bundle！ 🔴 正确方式： # .env  DB_PASSWORD=xxxxxx_API_KEY=xxxxxxSECRET_TOKEN=xxxxx server-only.config.js ： export const dbConfig = { password: process,env,DB_PASSWORD, apiKey: process,env,_API_KEY }

关键点提炼：避免混淆的两大要点 🔑🔒