页面可依系统语言自动切换，需准备对应JSON语言包并用navigator.language.split('-')[0]截取主语言码（如zh-CN→zh），缺失时回退至en；HTML文案须留空或隐藏body防闪动，同步设置document.documentElement.lang确保无障碍与字体正确，localStorage恢复时需处理null、前缀匹配及加载失败等边界情况。
页面能根据系统语言自动切换，前提是它不依赖后端渲染、且你已准备好对应语言的 JSON 包——否则 navigator.language 读出来也没法加载内容。
怎么拿到用户系统语言
浏览器通过 navigator.language 暴露当前语言码，但要注意：它返回的是完整标签（如 zh-CN、en-US、ja-JP），而你的 JSON 文件名很可能只是 zh.json 或 en.json。
- 直接用
navigator.language当文件名会失败（比如请求zh-CN.json但文件不存在） - 推荐先做截断：
navigator.language.split('-')[0]，得到zh、en、ja - 但别止步于此——有些用户设的是
zh-HK或pt-PT，截断后是zh、pt，得确认你有对应文件；没有就 fallback 到en - Safari 在某些地区可能返回
zh-Hans，需映射为zh（可建一个简表：{ 'zh-Hans': 'zh', 'zh-Hant': 'zh-TW' }）
如何避免页面首次加载时闪现默认语言
用户语言检测和 JSON 加载都是异步的，如果 HTML 里写死中文文案，那页面会先显示中文，再跳成英文——这个“闪动”对体验很致命。
- 最稳妥做法：HTML 中所有可翻译元素留空或只放占位符，比如
- 或者用
display: none隐藏整个，等翻译完成再display: block，但要加 loading 状态防白屏 - 千万别在
<script></script>标签里直接写document.body.innerHTML = ...，会清空所有事件绑定和动态插入的 DOM
为什么必须同步改 document.documentElement.lang
只替换文案不改根节点的 lang 属性，会导致两个实际问题：
- 屏幕阅读器仍按旧语言朗读，语调/停顿错乱（比如把中文当英文读）
- CSS 字体回退失效：日文假名在没
lang="ja"时可能走中文字体链，显示为方块或宽度异常 -
lang必须设成 BCP 47 合规值，比如zh-Hans、en-US，不能填zh_CN或chinese - 更新方式很简单：
document.documentElement.lang = 'zh'，但记得和文案更新放在同一次 DOM 批量操作里，避免中间状态
localStorage 记住选择后，还要处理哪些边界情况
存 localStorage.setItem('lang', 'ja') 很容易，但恢复时容易漏掉三类情况：
- 用户手动删了 localStorage，此时
getItem('lang')是null，得 fallback 到navigator.language - 用户系统语言是
fr-CA，但你只有fr.json，得做前缀匹配（fr-CA→fr），而不是只比对全等 - JSON 加载失败（404 或网络中断），必须有兜底文案逻辑，比如保留原始
data-i18n值或显示[missing: welcome]，而不是留空 - 如果用 fetch 加载语言包，记得加
.catch()，否则错误静默，页面文案全灭
真正麻烦的不是“怎么切”，而是“切完之后谁还在用旧语言上下文”——比如第三方组件、动态插入的弹窗、title 标签、alt 文本，这些都得单独处理，漏一项，多语言就破功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
