必须用子目录+hreflang实现多语言，每页声明所有语言版本（含自身）的绝对url，语言切换按钮需用根相对路径，禁用参数方案，客户端存储仅作补充且须配合真实路径重定向。
用 <link rel="alternate" hreflang> 声明语言版本关系
搜索引擎和浏览器依赖 <link rel="alternate" hreflang> 标签识别多语言页面间的对应关系。它不控制用户切换行为，但决定 SEO 权重分配和地址栏语言建议是否生效。
常见错误是只写当前页的 hreflang="x-default" 或漏掉 self-reference：
- 每页必须包含指向**所有语言版本**（含自身）的
<link>，不能只写其他语言 -
href必须是**绝对 URL** 或带协议的相对路径（如/zh/about.html），不能是about.html -
hreflang="x-default"应指向默认语言页（通常是英文），且该页也必须声明自己为x-default
示例（放在 中）：
<link rel="alternate" hreflang="en" href="https://example.com/en/about.html"><link rel="alternate" hreflang="zh" href="https://example.com/zh/about.html"><link rel="alternate" hreflang="x-default" href="https://example.com/en/about.html">
语言切换按钮必须用带前缀的 @#@#@#@#@#@#@#@#@#@0
/zh/blog/post-1.html 中，英文链接写成 @#@#@#@#@#@#@#@#@#@1
location.pathname.replace(/\/en\//, '/zh/')），易因路径结构变化失效若页面结构不完全对齐（比如某语言缺某页），应指向该语言的 fallback 页面（如 /zh/404.html），而非静默跳转到首页。
避免用 URL 参数（?lang=zh）做主切换机制
单纯靠 ?lang=zh 实现切换看似简单，但会带来三个硬伤：
- 所有页面 URL 都变成带参形式，无法被 CDN 或静态托管服务有效缓存（
/page.html?lang=zh和/page.html?lang=en被视为不同资源） - SEO 混乱：Google 不推荐用参数区分语言版本，
hreflang也无法精准绑定参数变体 - 书签和分享失效：用户复制链接后，别人打开可能因未携带参数回退到默认语言，且无法通过地址栏直接修改参数跳转
参数仅适合临时覆盖（如测试、调试），或作为 fallback 补充手段（例如检测到 ?lang=fr 且当前页无法语版时，跳转到法语首页）。主链路必须走子目录。
切换状态需持久化到 localStorage 或 cookie，但不可替代路径导航
用户选过一次语言后，下次访问自动进入对应语言页，这个体验靠客户端存储实现。但注意：存储只是优化，不能代替真实路径跳转。
典型误操作是只改页面文本（JS 翻译），却不改变 URL —— 这导致刷新后回到默认语言、无法分享特定语言页、SEO 完全失效。
- 语言选择器点击后，先写入
localStorage.setItem('preferred-lang', 'zh')，再执行window.location.href = '/zh/' + currentPath - 首屏加载时，读取
localStorage，若与当前路径语言不一致，**重定向**到对应子目录页（不是仅替换文本） - 不要用
history.replaceState()伪造 URL，搜索引擎和爬虫看不到 JS 修改后的地址
真正无缝，是指用户从 /en/products.html 切到 /zh/products.html 后，所有后续操作（返回、刷新、分享）都维持在中文上下文里——这只有靠真实路径才能做到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
