最可控方案是子目录结构+data-i18n标记+独立json语言包；需统一用/zh/、/en/等顶层子目录，链接带前缀，data-i18n须覆盖textcontent及placeholder/title等后缀属性，语言包扁平键值、bcp47命名，且同步更新各元素lang属性。
直接结论：用子目录结构 + data-i18n 标记 + 独立 JSON 语言包，是当前静态 HTML 项目最可控、SEO 友好、且不依赖构建工具的维护流程。 其他方案要么部署成本高（子域名/独立域名），要么后期改文案像拆炸弹（硬编码多套 HTML），要么 SEO 失效（纯 JS 切换不渲染）。
怎么组织目录结构才不会让链接断掉
所有语言版本必须放在顶层子目录下，比如 /zh/、/en/、/ja/，根目录 / 建议留作默认语言（通常是英文）或重定向到 /en/。这样做的实际好处是：
- GitHub Pages、Vercel、Netlify 都能原生托管，不用配 CNAME 或 DNS
- hreflang 标签可稳定指向
https://example.com/zh/和https://example.com/en/，Google 明确认可这种结构 - 页面内跳转必须用带前缀的绝对路径：
@#@#@#@#@#@#@#@#@#@0”），语言包里对应值必须是可信的纯 HTML 片段，JS 渲染时要用 <code>innerHTML替换，否则有 XSS 风险
JSON 语言包怎么设计才能避免上线后大面积留白
语言包不是随便写个对象就行，结构松散或 key 不一致，会导致 JS 查不到键就留空，整页文案消失。关键约束：
- 每个语言一个文件：
locales/zh.json、locales/en.json、locales/ja.json，内容全是扁平键值对，不要嵌套层级（别写{"ui": {"header": {"title": "https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"}}}） - 所有文件键名必须严格一致；某语言暂未翻译，也要写
"home.title": ""或占位符，不能直接删掉这个 key - 加载失败必须有 fallback：fetch 报错、404、或 key 不存在时，一律退到
en或你设定的主语言 JSON，不能静默失败 - 别把运行时变量塞进语言包，比如用户昵称、日期格式——这类要用插值语法
"hello {name}"，由 JS 运行时传参替换
lang 属性为什么必须同步更新到每个节点
只改 document.documentElement.lang 是无效操作。浏览器和屏幕阅读器按每个元素自己的 lang 属性决定字体回退、标点间距、语音朗读方式——不是继承根节点的。所以：
- 页面初始化时，设
document.documentElement.lang = 'zh-Hans'（注意：必须符合 BCP 47，zh_CN或chinese会被忽略） - 切换语言后，要遍历所有已存在的
lang属性节点（比如引用的<p lang="ja"></p>），把它们也更新成新语言，否则日文引文会跟着变成英文语音朗读 - 局部多语言内容（如代码块、英文术语、引文）必须显式写
lang="bash"或lang="en"，不能指望全局覆盖
最容易被忽略的是：语言包键名一致性、lang 属性的逐节点同步、以及 hreflang 标签与子目录路径的强绑定。这三处出问题，轻则文案空白，重则 SEO 收录错乱、屏幕阅读器误读。维护流程跑通的关键，不是“能不能切”，而是“切完之后，搜索引擎、用户、辅助技术是否都拿到一致且正确的信号”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
