最稳妥方案是在HTML模板中用固定定位添加ENV标签，构建时通过DefinePlugin（Webpack）或import.meta.env（Vite）注入环境变量，避免使用process.env.NODE_ENV，并按环境设置颜色（dev灰/test蓝/staging橙/prod红）。
怎么让页面右上角显示 ENV 标签
直接在 html 模板里加一层固定定位的提示块最稳妥，不依赖 js 渲染时机，也不怕 ssr 和 csr 切换出问题。关键是标签内容必须来自构建时注入的环境变量，而不是运行时读 location.host 或 process.env.node_env —— 后者在生产构建后会被 webpack 替换成 "production"，完全失去区分测试/预发/生产的能力。
常见错误是把 process.env.REACT_APP_ENV 直接塞进组件里渲染，结果打包后所有环境都显示 "production"；或者用 window.location.hostname 判断，但测试环境和预发环境域名可能一样（比如都走 test.example.com），导致标签错标。
- Webpack 项目：在
DefinePlugin里注入__ENV__，例如__ENV__: JSON.stringify('staging') - Vite 项目：用
import.meta.env.VITE_ENV，确保在.env.staging中定义VITE_ENV=staging - 标签颜色建议按环境分级：
dev→ 灰色，test→ 蓝色，staging→ 橙色，prod→ 红色（避免用绿色，容易被误认为“正常”）
为什么不能用 process.env.NODE_ENV 判断环境类型
process.env.NODE_ENV 只有三个取值："development"、"production"、"test"，它控制的是打包行为（比如是否压缩、是否开启 React DevTools），不是业务环境。你不可能在生产服务器上跑出 "development"，也不可能在测试服务器上跑出 "production" —— 所以它根本不能告诉你当前连的是测试库还是生产库。
典型翻车场景：本地开发时 process.env.NODE_ENV === 'development'，一打包部署到测试服务器，就变成 'production'，标签瞬间从「开发」跳成「生产」，完全失真。
- 真正要读的是你自定义的环境标识，比如
REACT_APP_ENV、VITE_ENV、APP_ENV - Node.js 后端同理，别依赖
process.env.NODE_ENV做数据库连接切换，该读NODE_ENV就读，该读APP_ENV就读，两者语义不同
Vue / React 组件里怎么安全渲染环境标签
标签必须静态可提取，不能包裹在异步逻辑或条件判断深处，否则服务端渲染时可能漏掉，或者首屏闪动。最简方案是写死在根组件顶层，用内联样式定位，避免额外 CSS 文件加载阻塞。
<div style="position: fixed; top: 12px; right: 12px; padding: 4px 8px; font-size: 12px; font-weight: bold; z-index: 9999; border-radius: 2px; color: white;" :style="{ backgroundColor: envBgColor }">
{{ __ENV__ }}
</div>
注意：不要用 v-if 或 {env && <env-tag></env-tag>} 控制显隐——即使你想隐藏生产环境标签，也该用 CSS display: none，而不是删掉 DOM，否则会破坏 SSR 一致性校验，React 报 Hydration failed。
-
__ENV__必须是字符串字面量，不能是函数调用或对象属性访问 - 颜色映射用 computed 或 useMemo 预计算，别在 render 里写三元表达式判断
- 如果用了微前端，主应用和子应用的环境变量可能不一致，得约定统一读取入口（比如都读
window.__MICRO_APP_ENV__）
上线后标签没显示？检查这三处
环境标签消失，90% 是构建时变量没打进包，剩下 10% 是 CSS 层叠或定位被覆盖。别急着改 JS，先看浏览器开发者工具 Sources 里打包后的 JS 文件，搜一下 __ENV__ 或你用的变量名，确认它是不是被替换成字面量了。
- Webpack：检查
DefinePlugin的 key 是否带引号（"__ENV__"✅，__ENV__❌） - Vite：确认
.env.[mode]文件名和启动命令的--mode参数匹配（vite build --mode staging对应.env.staging） - CSS：给标签加
!important临时验证是否被样式覆盖，特别是用了 antd、element-plus 这类 UI 库时，它们的全局重置可能干掉position: fixed
最麻烦的情况是 CI 构建用的环境变量和本地不一致，比如 Jenkinsfile 里写死了 ENV=prod，但你本地 .env.production 里却是 VITE_ENV=staging —— 这时候光看本地构建结果没用，得去构建日志里翻 actual environment variables。
