json文件应按业务变更频率和协作角色拆分，而非文件大小或目录层级：common.json存通用词，form.json管表单校验，error.json专收系统级错误提示，各模块对应真实业务边界。
语言包按功能模块拆分不是为了“看着整齐”，而是让加载、维护、协作都可收敛——common.json 放通用词，form.json 管表单校验文案，error.json 专收错误提示，每个模块对应真实业务边界，而不是按字母或长度硬切。
JSON 文件该按什么维度拆分？
拆分依据是业务变更频率和协作角色，不是文件大小或目录层级：
- common.json：登录页、首页、导航栏共用词（
login、home、logout），由产品统一维护 - form.json：所有表单相关文案（
required、email_invalid、submit_success），由前端+后端联调时确认 - error.json：HTTP 错误码、网络异常、权限拒绝等系统级提示（
401_unauthorized、network_timeout），由 SRE 和前端共同定义 - 不要把“用户管理”整个模块塞进 user.json——如果其中的“角色分配”页面文案和权限系统强耦合，就该划到
permission.json，否则改权限逻辑时会漏翻
构建时怎么合并多模块语言包？
用 Promise.all 并行加载，但必须控制加载顺序和失败兜底：
- 每个模块语言包路径要带版本哈希，比如
/locales/zh/form.abc123.json，避免 CDN 缓存旧包 -
fetch失败时不能直接 throw，得 fallback 到空对象并记录日志：console.warn('Failed to load form.json, using empty fallback') - 合并后必须做 key 冲突检查：
Object.keys(zh).filter(k => en[k] === undefined)找出缺失项，CI 阶段报错而非运行时静默丢文案 - 别在 runtime 拼字符串路径：
fetch(`/locales/${lang}/${module}.json`)容易被恶意构造 lang 参数导致 XSS，应白名单校验lang值
动态插入的 DOM 怎么触发翻译？
data-i18n 不会自动生效，新节点必须显式调用翻译函数：
- 弹窗、表格行、懒加载区块插入后，立即执行：
i18n.translate(el)（假设你封装了 translate 方法） - 不要依赖 MutationObserver 全局监听——它无法区分哪些节点是“已翻译过”的，容易重复替换导致 HTML 实体被二次转义
- 若用
innerHTML插入含 HTML 的文案（如"请阅读@#@#@#@#@#@#@#@#@#@0"），语言包里对应值必须是可信 HTML 字符串，且插入前需用DOMPurify.sanitize()过滤 -
placeholder、alt、title、aria-label都要单独处理，只替换 textContent 会导致无障碍访问失效
最容易被忽略的是 lang 属性——它必须写在每个含文本的标签上，<p lang="zh">你好</p>，而不是只设在 。浏览器不继承，屏幕阅读器不查父级，标点渲染、字体回退、连字规则全靠这个属性定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
