2026-05-18 学习日志

今日主题

• Vite import.meta.env 机制与可移植性

新增认知

Vite import.meta.env 机制与可移植性

• import.meta.env 是 Vite 专有而非浏览器标准：
  import.meta.env.MODE/DEV/PROD/BASE_URL 是 Vite 构建时通过静态替换实现的特性，不是浏览器原生 API。
  以 VITE_ 前缀命名的环境变量也会自动暴露到 import.meta.env.VITE_XXX，构建时替换为对应字符串值。

• MODE 与 DEV/PROD 是独立的两套口径：MODE 由 --mode 参数决定，可自定义任意值（如 staging），
  影响对应 .env.{mode} 文件的加载；DEV/PROD 是纯布尔值，只由命令类型决定——vite dev 时 DEV=true，
  vite build 时 PROD=true，不能被 --mode 覆盖。常见用法是 MODE 区分环境配置，
  DEV 控制 HMR/devtools 等纯开发期功能。

• 构建工具环境变量注入机制不互通：
  Webpack/Turbopack 使用 process.env.NODE_ENV + DefinePlugin 注入，
  Vite 使用 import.meta.env 静态替换，esbuild/Rollup 各有机制。直接使用构建工具专有 API 会导致工具锁定。
  如需可移植性，可封装一层 src/config/env.ts 统一导出运行环境的值，业务代码只引用这一层；
  或依赖 Next.js/Nuxt 等上层框架抹平差异。