浏览器只认第一个标签，后续所有均被静默丢弃；常见于ssr模板拼接、微前端注入或组件动态渲染场景，易导致资源加载异常与跳转错误。
多个<base>标签时，浏览器只认第一个
HTML 规范明确要求 <base> 必须唯一，浏览器遇到多个时，会静默丢弃除第一个之外的所有 <base> 标签。控制台通常会提示 Multiple base elements detected. Only the first one is used.，但这个提示不是错误，也不中断解析——后续相对路径全部按第一个 href 值解析，其余标签完全无效。
为什么重复的<base>容易在现代前端中出现
常见于 SSR 模板拼接、微前端子应用注入、或 Vue/React 组件内动态生成 HTML 片段的场景。比如：
- 服务端模板中 header 部分 render 了一个
<base href="/app/">，页面组件又 render 了一个<base href="/admin/"> - Vite 插件自动注入
<base>，而开发者又手动在index.html里写了一个 - 使用
v-html或dangerouslySetInnerHTML渲染含<base>的富文本
这些情况都不会报错，但第二个及之后的 <base> 对资源加载、锚点跳转、表单提交等行为毫无影响。
<base> 位置错 + 数量多 = 双重失效风险
即使只有一个 <base>，如果它没放在 最前面，它对之前已解析的标签（如提前写的 <link> 或 <script></script>）也完全无效。多个标签叠加时，这种“位置错 + 只认第一个”的组合会让问题更隐蔽：
- 第一个
<base>放在<title></title>后面 → 它对<title></title>前的任何资源都无效 - 第二个
<base>虽然位置正确，但被浏览器直接忽略 - 结果是：部分资源走原始页面 URL，部分走第一个
<base>，404 和跳转异常混发，排查困难
如何检测和避免多 <base> 问题
上线前建议用以下方式主动检查：
- 在浏览器控制台运行
document.querySelectorAll('base').length，值大于 1 就有问题 - 构建产物中全局搜索
<base>，确认是否来自多个来源（如模板、插件、组件） - 禁用所有构建时自动注入
<base>的插件（如 Vite 的build.base已配置时，就别再手写 HTML 中的<base>） - SSR 场景下确保只有 layout 层负责输出
<base>，子页面不参与
真正可靠的方案不是“容许多个”，而是从源头杜绝——把 <base> 的声明权收归一处，且严格校验其 href 值是否合法（必须以 /、http://、https:// 或 // 开头，并以 / 结尾）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
