必须通过构建时注入语言包路径前缀+运行时动态拼接实现，如Vite用define配置__LOCALES_BASE__，Webpack用DefinePlugin注入LOCALES_BASE_URL，再结合lang + '.json'生成路径，避免硬编码导致CDN 404或环境错乱。
多环境语言包参数不能靠硬编码或手动替换，必须通过构建时注入 + 运行时解析组合实现；否则 dev 环境用 zh.json、prod 却加载了 en.json，或者本地调试时 fallback 错乱，都是常见翻车点。
怎么让不同环境加载对应语言包路径
语言包路径（如 ./locales/zh.json）不能写死在 JS 里，否则构建产物无法区分环境。正确做法是把路径前缀抽成变量，在构建阶段注入：
- Webpack：用
DefinePlugin注入LOCALES_BASE_URL，值为'/assets/locales'（prod）或'http://localhost:8080/locales'（dev） - Vite：在
vite.config.ts的define中配置__LOCALES_BASE__，JS 中读取__LOCALES_BASE__ + '/' + lang + '.json' - 纯 HTML + 手动构建：在
<script></script>前插入内联window.__ENV__ = { localesBase: '/locales' };，运行时拼接
错误示例：fetch('./locales/' + lang + '.json') 在 CDN 部署后会 404，因为相对路径解析失败。
如何避免测试环境误用生产语言包
关键不是“能不能加载”，而是“加载失败后 fallback 是否可靠”。多环境最容易忽略的是 fallback 顺序和兜底策略：
立即学习“前端免费学习笔记（深入）”；
- 开发环境应强制启用
localStorage.getItem('preferred-lang')，即使为空也跳过 navigator.language，避免本地调试时被浏览器语言干扰 - 测试环境（staging）需拦截所有
fetch请求，mock 返回 404 或空 JSON，验证是否退到内置英文对象（而非留白） - 生产环境必须禁用
console.warn输出缺失 key，但保留日志上报机制——比如当key === 'nav_dashboard' && lang === 'ja'未命中时，上报给 Sentry
常见错误：测试时一切正常，上线后用户看到 home.title 而不是“首页”，因为 en.json 被意外删掉，而 fallback 只写了 zh.json，没设默认英文兜底。
为什么不能用环境变量名直接当语言码
环境变量（如 NODE_ENV=production）和语言码（lang=zh-Hans）是两套逻辑，混用会导致语义错乱和维护陷阱：
-
process.env.NODE_ENV === 'development'不等于lang === 'zh'，开发者本地可能切英文调试 UI 布局 - CI/CD 构建时若把
REACT_APP_LANG=ja写进环境变量，会污染所有环境——测试服也变日文，且无法 runtime 覆盖 - 真正该由环境决定的，只有语言包基础 URL、是否开启 mock、是否上报缺失 key，而不是“当前该显示哪种语言”
语言选择权必须始终保留在运行时：URL 参数 > localStorage > navigator.language > 默认 en，这个链路不能被构建时变量打断。
动态语言包加载失败时怎么不崩页面
fetch 失败不是小概率事件，尤其在弱网或 CDN 缓存失效时。只靠 try/catch 不够，要分层兜底：
- 第一层：fetch 前检查
if (!__LOCALES_BASE__) throw new Error('locales base not configured')，避免静默拼出错误路径 - 第二层：fetch 后检查
response.status === 200 && response.headers.get('content-type')?.includes('application/json')，防服务器返回 HTML 错误页 - 第三层：JSON 解析后遍历所有已标记的
data-i18n元素，对每个 key 检查是否存在；缺失则用key.replace(/\./g, '_')生成简略提示（如home_title_missing），而非留空
最常被忽略的一点：切换语言时如果新语言包加载失败，页面不能回退到旧语言——因为 DOM 已部分更新，textContent 和 lang 属性可能不一致，屏幕阅读器会读错。必须保持“语言包未就绪，就不触发任何更新”原则。
