← 中文资源

简体中文版本

Vite import.meta.env.VITE_X 在构建中为 undefined

通过使用 VITE_ 前缀、在构建时提供变量,并理解 env 是静态内联的,修复 Vite 环境变量为 undefined。

阅读英文原文

症状

错误“Vite import.meta.env.VITE_X 在构建中为 undefined”指向一个明确的失效模式。下面依次给出症状、定位该原因的检查命令、根本原因、修复方案,以及证明修复有效的验证步骤。

可观察到的症状包括:

  • import.meta.env.VITE_API_URL 打印为 undefined
  • 变量存在于 .env 但不在构建产物中
  • 运行期环境变更不影响已构建的应用

诊断

先在隔离环境中复现故障,再按顺序执行以下检查,逐步缩小范围。

步骤 1

grep -rn "VITE_" .env* src/ | head

无 VITE_ 前缀的变量不会被暴露;缺失 .env 条目即解释 undefined。

步骤 2

grep -ro "VITE_API_URL[^,;]*" dist/assets | head

产物中内联的字面量可证明其捕获时机。

常见诱因(按出现频率排序):

  • 变量缺少 VITE_ 前缀,Vite 不会暴露
  • 仅加载 .env 文件,而变量仅以进程环境设置、无对应 .env 条目
  • 在运行期读取该值,而 Vite 在构建时静态替换

根因

Vite 仅暴露带 VITE_ 前缀的变量,并在构建时将其内联进产物。缺少前缀,或构建时该值不存在,都会使引用被替换为 undefined,且之后的环境变更不再生效。

修复

加 VITE_ 前缀,在 .env 文件或构建环境中定义该值;若需真正的运行期配置,应提供配置端点或注入运行期脚本,而非依赖构建期内联。

注意:凡带 VITE_ 前缀的内容都会嵌入公开产物;切勿在此放置密钥。

# .env.production (must be present during the build)
VITE_API_URL=https://api.example.com

// src/env.ts
const apiUrl = import.meta.env.VITE_API_URL; // inlined at build time
if (!apiUrl) throw new Error('VITE_API_URL missing at build time');

// runtime config alternative (not inlined): fetch /config.json on boot

验证

重新构建并确认变量解析成功;验证内联值与预期环境一致。

修复后补充一条回归测试,复现原始症状,防止问题再次出现。

这类故障通常是环境问题而非纯逻辑错误,因此在缺陷记录中应写明完整命令、环境变量与工作目录。请用最小的脚本复现,待最小用例清楚后再扩大范围。为这类故障准备一份简短的排查清单,能显著减少下次排障时间。