语言切换栏真正可用需满足四点：select必须带id、option value用标准BCP 47标签、禁用自定义下拉、切换后同步更新document.documentElement.lang；路径跳转须正则剥离原语言前缀再拼接，禁用base标签动态改href。
怎么让
多数人写的语言切换栏根本没生效——JS 拿不到元素、选完不跳转、文字变了但 lang 属性还是 en。核心问题不在样式，而在 HTML 结构和 JS 同步逻辑是否合规。
必须满足这四点，否则就是无效切换：
-
<select id="language-select"></select>必须带id或name，否则document.getElementById('language-select')返回null -
<option value="zh-CN">中文</option>的value必须是标准 BCP 47 标签，禁用chinese、zh_CN、cn等非标写法 - 默认项用
<option disabled selected value="">Language</option>，避免空字符串误触发切换 - 禁用任何基于
<div> <ul> 的“自定义下拉”，它破坏键盘导航和屏幕阅读器识别</ul> <h3>切换后 document.documentElement.lang 不更新会出什么问题</h3> <p>只改文字、只跳 URL，不执行 <code>document.documentElement.lang = 'zh-CN'，等于没切语言。浏览器的字体回退、引号渲染、拼写检查、语音朗读全按旧语言处理。典型现象：
- Safari 把中文引号渲染成英文直角引号（「 → "）
- Chrome 语音朗读“上海”读成英语重音，轻声丢失
- NVDA 屏幕阅读器对中文段落仍按英文语序断句
-
:lang(zh)CSS 选择器完全不匹配，样式失效
子内容若需不同语言（如引用英文原文），必须显式加
lang="en"，不能依赖继承。路径跳转时怎么避免 //zh//about.html 这类多斜杠 404
别用
window.location.href = '/zh/' + window.location.pathname拼接，pathname开头自带/，一拼就是双斜杠，Nginx/Cloudflare 直接 404 且不报错。正确做法是先剥离前缀再拼：
const path = window.location.pathname.replace(/^\/(en|zh|ja)\//, '/'); window.location.href = '/zh/' + (path || '/');
更健壮的写法应配合正则提取当前语言前缀，并确保所有语言路由都指向同一份 HTML 入口（服务端配置 Nginx location /en/** { proxy_pass ...; }）。
为什么不能用
动态管理多语言路径 <base>标签根本不参与语言维度，它只静态控制资源加载路径。动态改href会导致已解析的<img src="logo.png">和<script src="app.js"></script>全部 404，而且浏览器连警告都不给。常见翻车操作：
- JS 执行
document.querySelector('base').href = '/zh/'—— 浏览器忽略，或只影响后续标签 - SSR 页面生成时用了
<base href="/en/">，但用户在/zh/路径打开 —— 所有相对路径资源加载失败 - 重复插入
<base>，Chrome 提示Multiple base elements detected. Only the first one is used.
真正可控的路径管理在三层：构建工具（Vite
base: '/zh/'）、前端路由（Vue RoutercreateWebHistory('/zh/')）、服务端路由匹配（Nginx 将/zh/**和/en/**都代理到同一 index.html）。
