navigator.language返回浏览器ui语言的bcp 47标签（如"zh-cn"），不能直接当语言代码用，需统一转小写、提取主语言码（如"zh"）、排除无效值后才可安全匹配翻译资源。
navigator.language 返回的是什么值，能直接当语言代码用吗
navigator.language 返回的是浏览器当前 UI 语言的 BCP 47 标签，比如 "zh-CN"、"en-US"、"ja"。但它不是总能直接拿来匹配翻译包文件名——常见坑是大小写不一致（如 "ZH-cn"）、带地区码但你的包只按语言码分（如 "zh-CN" vs "zh"）、或返回 "und"（undefined）。
实操建议：
- 统一转小写再切分：
navigator.language.toLowerCase().split('-')[0]得到基础语言码（"zh"、"en"） - 若需支持地区差异（如简体/繁体中文），保留完整值但做白名单校验：
["zh-CN", "zh-TW", "en-US", "en-GB"]，避免直接拼接路径导致 404 - 兜底必须设为默认语言（如
"en"），不能依赖navigator.language的返回值
加载翻译包时怎么避免阻塞渲染或重复请求
直接 import() 或 fetch() 翻译 JSON 可能触发网络请求延迟，且若用户切换语言或组件多次挂载，容易发多次请求。
实操建议：
- 用
Promise缓存加载结果：const langCache = new Map();，每次加载前先查缓存 - 动态
import()更推荐（尤其配合 webpack/vite）：import(`./locales/${lang}.json`)，注意 vite 要求路径是静态字符串模板，不能是变量拼接，所以得用import.meta.glob预收集 - 如果用
fetch，记得加cache: 'default'或'force-cache'，避免重复拉同一份
React/Vue 中如何在组件挂载时安全读取并响应语言变化
组件初始化时读 navigator.language 没问题，但用户可能手动改系统语言，或页面运行中切换了浏览器语言设置（虽少见）。纯靠首次读取不够健壮。
实操建议：
- 不要监听
languagechange事件——它只在浏览器语言真正变更且页面未关闭时触发，实际几乎不可靠 - 把语言识别逻辑抽成独立 hook（React）或 composable（Vue），首次加载后存入 context / store，后续由上层控制切换
- 若需“自动探测 + 允许覆盖”，初始值用
navigator.language推导，但状态可被用户操作（如语言下拉框）覆盖，避免反向同步
遇到 404 加载失败时该怎么降级处理
比如用户是 "zh-HK"，但你只有 "zh-CN" 和 "en" 包，直接报错或空白会破坏体验。
实操建议：
- 按优先级尝试多个路径：
["zh-HK", "zh", "en"]，逐个import()并catch，第一个成功即停 - 降级链要明确：地区码 → 语言码 → 默认语言（硬编码
"en"），别依赖 fallback 文件存在 - 开发期加
console.warn提示缺失包，但生产环境静默，避免污染日志
navigator.language，而是让整个 i18n 流程对「语言码不精确匹配」「包加载异步性」「服务端/客户端语言不一致」这三类情况有容错。多数 bug 出在假设「浏览器给的一定是我支持的」。
