最稳妥方式是在HTML标签上写死data-env属性，服务端渲染由模板引擎注入，静态页由构建脚本替换占位符；严禁JS运行时写入，应优先读取document.documentElement.dataset.env并校验，CSS用属性选择器控制，且HTML需禁用缓存以防环境标识错乱。
怎么在HTML里安全写死环境标识
直接往 标签加 data-env 属性最稳妥，比如 。服务端渲染时由模板引擎注入，纯静态页则靠构建脚本（如 Webpack 的 html-webpack-plugin）替换占位符。千万别用 JS 在运行时动态写入——首屏渲染前 JS 还没执行，CSS 或早期脚本就可能读错环境。
- 服务端场景：Django 用
{{ ENVIRONMENT }}，Nginx 可用sub_filter替换<!-- ENV:DEV -->注释 - 构建时场景：Vite 中通过
define注入全局常量，再在 HTML 模板里用<script>document.documentElement.dataset.env = '__MODE__'</script>（注意：这必须放在最前，且仅适用于构建后确定的环境） - 避免用
location.hostname判断——测试域名可能和生产一样（比如staging.example.com和example.com都走 HTTPS，但逻辑不同）
JS 里读取环境标识的可靠方式
优先读 document.documentElement.dataset.env，不是 document.body.dataset.env 或自定义全局变量。前者 DOM 加载即存在，后者依赖执行顺序，容易在异步模块中读到 undefined。
- 读取后建议立刻做校验：
if (!['dev', 'test', 'prod'].includes(env)) throw new Error('Unknown env: ' + env) - 不要缓存这个值到模块顶层变量——SSR 渲染时可能混用环境（比如同一份代码跑在 Node 和浏览器）
- 如果用了微前端，子应用必须从主应用透传环境，不能自己读 DOM，否则 iframe 或沙箱环境里
dataset可能不可见
CSS 里根据环境隐藏/显示元素
用属性选择器最直接：[data-env="test"] .debug-panel { display: block; }。别用 class 名如 env-test ——容易和业务 class 冲突，也难统一维护。
- 所有环境相关样式必须写在全局 CSS 文件头部，避免被局部 scoped style 覆盖
- 慎用
display: none隐藏敏感信息——DOM 仍存在，源码可见；真正要隔离的内容（如测试用的 mock 接口地址）必须从 HTML 中彻底剔除，而不是靠 CSS 控制显隐 - 构建工具可配置条件编译：Webpack 的
DefinePlugin能让process.env.NODE_ENV === 'production'在 CSS-in-JS 中生效，但纯 CSS 文件不支持该变量
常见错误：Nginx / CDN 缓存把测试环境 HTML 返回给生产用户
这是最隐蔽也最危险的问题。一旦 data-env="test" 的 HTML 被 CDN 缓存并返回给线上用户，JS 就会误判环境，可能调用测试接口、上报错误埋点到测试监控系统，甚至泄露调试信息。
立即学习“前端免费学习笔记（深入）”；
- 确保 HTML 响应头包含
Cache-Control: no-cache, no-store, must-revalidate（尤其对带环境标识的 HTML） - Nginx 配置里检查是否误加了
add_header Cache-Control "public, max-age=31536000"到所有.html文件 - CDN 缓存策略必须排除含
data-env的 HTML，或按请求头（如X-Env）分路径缓存
环境标识看着简单，真正难的是让它在构建、部署、缓存、跨框架通信里全程不漂移——任何一环断开，data-env 就从开关变成幻觉。
