data-i18n属性必须显式覆盖所有可翻译节点及属性：button、label、input placeholder、img alt、link title、svg text等，分别使用data-i18n、data-i18n-placeholder、data-i18n-title等后缀，不可依赖class/id推断，script/style/pre内添加无效。
data-i18n 属性怎么打才不漏翻译点
只给 <h1></h1> 或 <p></p> 加 data-i18n 是常见疏漏。实际要覆盖的节点类型更多：按钮文字、表单 label、input 的 placeholder、图片 alt、链接 title，甚至 SVG 里的 <text></text> 元素。
正确做法是显式标注每种目标属性：
-
data-i18n→ 控制textContent（默认行为） -
data-i18n-placeholder→ 替换placeholder -
data-i18n-title→ 替换title -
data-i18n-alt→ 替换alt -
data-i18n-innerhtml→ 替换innerHTML（仅限可信 HTML 片段）
别依赖 class 或 id 推断键名，JS 不会猜；也别在 <script></script>、<style></style> 或 <pre class="brush:php;toolbar:false;"></pre> 内部加 data-i18n——这些节点不渲染文本，替换无效。
JSON 语言包结构和加载怎么防翻车
语言包不是随便写个对象就行。路径必须固定：./locales/zh.json、./locales/en.json，文件名严格按 BCP 47 标准（zh-CN 可，zh_CN 或 chinese 会被忽略）。
结构必须扁平，键名完全对齐：
{"header_title": "欢迎", "login_btn": "登录", "search_placeholder": "搜索..."}
所有语言文件字段一致，哪怕某语言暂未翻译，也要保留键并设为空字符串："login_btn": ""。否则 JS 查不到 key 就留白，用户看到的是裸露的键名。
加载时用 fetch()，但必须包裹两层判断：
-
try/catch捕获网络错误（TypeError: Failed to fetch） -
response.ok判断 HTTP 状态是否为 2xx - fallback 顺序：先试完整码（
zh-HK），再截主语言（zh），最后退到默认（en）
切换语言时 DOM 和 lang 属性怎么同步更新
只改 document.documentElement.lang 是无效操作。屏幕阅读器、字体回退、标点间距都取决于**每个元素自身的 lang 属性**，不是继承来的。
切换时必须做三件事：
- 遍历所有带
data-i18n的元素，用新语言包更新其对应属性（textContent、placeholder等） - 同步更新
document.documentElement.lang（如设为zh-CN） - 再遍历所有已存在
lang属性的子元素（比如引用外文段落的<p lang="ja"></p>），按需保留或重置——除非明确要维持原语言
否则，语音朗读仍用旧语言，中英文混排时标点间距错乱，CSS 的 html[lang="zh-CN"] 选择器也匹配不到子节点。
日期/数字/货币格式怎么真正本地化
<input type="date"> 和 <time></time> 标签不会自动格式化显示内容。前者 UI 视觉适配是浏览器“糖衣”，value 永远是 ISO 格式；后者仅提供语义，不控制渲染。
真正可控的本地化靠 Intl.DateTimeFormat、Intl.NumberFormat 和 Intl.RelativeTimeFormat：
- 传入明确的
locale（如'zh-CN'），不要依赖navigator.language—— 它可能为空或错乱 - 选项要具体：
{ year: 'numeric', month: 'long', day: 'numeric' }，避免模糊配置 - 动态内容（如 AJAX 返回的时间戳）必须手动调用格式化，插入到
textContent或innerText中 - 复数、序数词等复杂规则，纯
Intl支持有限，需引入i18next这类库处理
容易被忽略的是：格式化实例不能复用。切换语言后，必须重建 Intl 对象，否则仍用旧 locale 渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
