#Vite 环境变量

#1. 面试题

Q: Vite 如何处理环境变量？与 Webpack 的 process.env 有什么区别？

#2. 核心解答

环境变量是区分开发、测试、生产环境的核心手段 (如 API Base URL)。

#(1) Webpack

• process.env.NODE_ENV：这是 Node.js 的全局变量，Webpack 会在编译时通过 DefinePlugin 注入到代码中，替换为 'production' 或 'development' 字符串。
• dotenv (Webpack 插件)：从 .env 文件读取变量。

#(2) Vite

Vite 使用 impot.meta.env 来访问环境变量。这遵循了 ESM 标准。

• .env: 所有环境读取。
• .env.local: 本地读取 (会被 git 忽略)。
• .env.[mode]: 只有指定模式才读取 (.env.production)。
• .env.[mode].local: 只有指定模式且本地才读取。

变量前缀： 出于安全考虑，Vite 只暴露以 VITE_ 开头的变量 到客户端代码中。 例如 .env 中写了 DB_PASSWORD=123 和 VITE_API_URL=/api：

• console.log(import.meta.env.VITE_API_URL) -> '/api' (OK)。
• console.log(import.meta.env.DB_PASSWORD) -> undefined (Safe)。

#(3) 内置变量

• import.meta.env.MODE: 当前模式 (development / production)。
• import.meta.env.BASE_URL: 部署的基础路径 (base options)。
• import.meta.env.PROD: 是否生产环境。
• import.meta.env.DEV: 是否开发环境。
• import.meta.env.SSR: 是否 SSR 构建。

#3. 面试加分项

#Q:import.meta 是什么？

它是 ES2019 标准引入的一个元属性，用于向模块暴露特定的上下文元数据。在浏览器 ESM 中，import.meta.url 返回模块的绝对 URL。Vite 利用这个特性挂载了 frame (Env) 信息。

#4. 总结

• Prefix: VITE_ (Security).
• Files: .env, .env.local, .env.[mode].
• Access: import.meta.env.
• Contrast: process.env (Webpack).