必须同步更新document.documentelement.lang、所有lang子元素、data-i18n文本、动态属性及intl实例，且语言包键名、bcp 47格式、dom更新方式需严格对齐，否则换语言即换bug。
只改 document.documentElement.lang 不够，页面照样乱码、朗读错、翻译失效——必须同步更新根节点和所有带 lang 的子元素，且语言包键名、BCP 47 格式、DOM 更新方式全得对齐，否则换语言就是换 bug。
lang 属性写在哪才被浏览器认
浏览器只认 html 标签上的 lang，写在 body、div 或任意其他标签上等于没写。SEO、自动翻译提示、屏幕阅读器发音、CSS 的 hyphens: auto 全部失效。
- SSR 页面：服务端根据
Accept-Language头或 URL 路径（如/ja/）直接输出 - SPA 页面：语言切换时必须执行
document.documentElement.lang = "zh-Hans"，别只改 state 或 class - 静态页：每个语言版本单独一份 HTML，
lang值硬编码，避免 JS 注入延迟导致闪动 - 检查方法：DevTools → Elements → 点击
html节点，确认属性存在且值合法（如zh-CN，不是zh_CN或Chinese）
data-i18n 标记怎么打才不漏不垮
data-i18n 是驱动文本替换的锚点，但它只管 textContent，不自动处理 placeholder、title、alt 这类属性，也不影响 <script></script> 或 <pre class="brush:php;toolbar:false;"></pre> 里的内容。
- 所有需翻译的可见文本节点，必须显式加
data-i18n="home.title"，不能靠 class/id 推断 - 表单控件要分开处理：
<input data-i18n-placeholder="search.hint">、<button data-i18n-title="btn.tooltip"></button> - 含 HTML 结构的文案（如带链接的提示），用
innerHTML替换，但语言包里对应值必须是可信的纯 HTML 片段，否则有 XSS 风险 - 别在
<script></script>、<style></style>、<pre class="brush:php;toolbar:false"></pre>里加data-i18n——这些节点不渲染为用户可见文本
切换语言时哪些东西必须同步更新
只刷新文字内容远远不够。浏览器、屏幕阅读器、字体引擎、拼写检查器，全都按每个节点自己的 lang 值工作，不是看父级继承来的。一次切换，至少要动五处：
-
document.documentElement.lang（根语言） - 所有已存在的
lang子元素（比如引文<p lang="fr"></p>、代码块<pre class="brush:php;toolbar:false;" lang="bash"></pre>）——它们不能跟着主语言一起切，得保留原值 - 所有
data-i18n绑定的文本内容（用textContent优先，避免事件丢失） - 动态属性：
placeholder、title、aria-label等需通过data-i18n-placeholder等后缀属性更新 - Intl 实例：
Intl.DateTimeFormat、Intl.NumberFormat必须重建，旧实例不会自动响应语言变更
JSON 语言包结构和加载怎么防翻车
语言包不是随便塞键值对就行。结构错、大小写错、路径错、加载失败没 fallback，都会导致整页留白或显示 key 名。
- 每个语言一个文件：
locales/zh.json、locales/en.json、locales/ja.json，内容全是顶层键值对，不嵌套 - 所有文件键名严格一致；某语言暂未翻译，也要留空字符串
"home.title": ""，否则 JS 查不到就留白 - 加载必须有 fallback：
fetch失败或 key 不存在时，退到en或预设主语言，不能静默失败 - 避免在 JSON 里放运行时计算内容（如用户昵称、时间格式），这类要用插值语法
"hello {name}"+ JS 运行时替换 - IE11 兼容注意：
element.dataset.i18n不可用，得用element.getAttribute('data-i18n')兜底
最容易被忽略的是：局部多语言内容（比如一段法语引文、一行 Bash 命令）必须显式声明 lang，不能指望根节点覆盖；而语言切换后，这些局部 lang 值又不能跟着主语言变——它们得保持原样，否则日文假名会用中文字体渲染，法语重音会错读。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
