标准答案
- 前端构建工具通常会把特定前缀的环境变量注入到客户端代码里,这些值会出现在最终产物中。
- API Base URL、公开开关、环境标识可以作为前端公开配置;数据库密码、服务端 token、私有 API key 不能放进去。
- 需要调用私密服务时,应通过后端接口、BFF、Serverless Function 或服务端代理完成。
- 构建期变量适合随版本固定的配置,运行时配置适合部署后按环境切换的公开参数。
- 还要避免把 .env、日志、source map 或错误上报里的敏感值暴露出去。
题目解析
判断一个环境变量能不能放前端,最简单的标准是:它进入 bundle 后就等于公开。即使变量名叫 SECRET,只要被客户端代码引用,用户就能从产物、DevTools 或 sourcemap 里找到它。
公开配置和私密配置要分层。API 域名、灰度开关、站点环境可以暴露;支付密钥、数据库地址、服务端 token 必须留在服务端,通过后端接口或 BFF 间接使用。
运行时配置还涉及部署策略:有些团队希望同一份静态产物部署到多个环境,这时就不能只依赖构建期 .env,需要额外的运行时 config 注入方案。
代码示例
前端只读取公开变量,私密密钥留在服务端。
Text
client bundle:
PUBLIC_API_BASE_URL=https://api.example.com
server only:
PAYMENT_SECRET_KEY=sk_live_xxx
DATABASE_URL=postgres://...常见误区
- 把第三方服务私钥放进 VITE_、NEXT_PUBLIC_ 这类会暴露到客户端的变量中。
- 认为混淆或压缩后的前端产物能保护密钥。
- 忘记 source map、日志和错误上报也可能带出环境信息。