Vite 多环境构建的注意点

Vite 的环境变量机制很直接，但多环境项目仍然容易出错。灰度包打到生产 API、生产包引用测试资源、构建目录互相覆盖，这些问题一旦上线影响很大。多环境构建的重点不是能不能打包，而是能不能确认产物属于正确环境。

一、环境变量命名要直观

前端可见变量需要使用明确前缀，例如 VITE_API_BASE。变量名应该表达用途，而不是表达某次临时需求。不同环境的变量文件要保持字段一致，避免某个环境缺字段时在运行时才发现。

二、输出目录要避免互相覆盖

如果灰度和生产都输出到同一个 dist，很容易部署错产物。更稳的做法是给关键环境使用不同输出目录，例如灰度输出到 dist-staging，生产输出到 dist-production，部署脚本也固定读取对应目录。

三、构建后要检查产物内容

构建成功只能说明语法和依赖没问题，不能说明环境正确。可以写脚本检查产物里是否包含预期 API 域名、是否不存在其它环境域名、入口 HTML 是否引用正确资源。这个检查应该在部署前自动执行。

• 环境变量字段在各环境保持一致。
• 灰度和生产使用不同构建命令和输出目录。
• 部署脚本固定读取对应环境产物。
• 构建后检查 API 地址和关键配置。

环境问题往往不是代码难，而是流程不够严格。把构建和验证固定下来，可以避免很多低级但严重的事故。