base标签只能有一个，因其解析时机为HTML自上而下单次线性扫描，仅第一个生效，后续base被静默忽略并触发控制台警告；document.baseURI为只读快照，不响应DOM变更。
base标签的解析时机决定了它只能有一个
HTML 解析器在读取 <head> 时是自上而下、单次线性扫描的。<base> 的作用不是“设置一个可覆盖的全局变量”，而是**在解析流中某一点重置后续所有相对 URL 的基准起点**。这个重置动作只发生一次，且不可撤销——后面再出现一个 <base>，解析器不会“更新”基准，而是直接忽略（或仅记录警告）。这不是浏览器的 bug，而是 HTML 规范明确要求的行为。
多个base标签的实际表现：静默丢弃 + 控制台警告
现代浏览器（Chrome、Firefox、Safari）遇到多个 <base> 时，只会使用第一个，其余全部跳过。你不会看到报错弹窗，但控制台会输出类似这样的提示：
Multiple base elements detected. Only the first one is used.
常见触发场景包括：
- SSR 模板拼接时，layout 组件和 page 组件各自 inject 了一个
<base> - Vue/React 组件内用
useEffect或mounted动态插入，导致重复挂载 - 后端模板引擎条件渲染逻辑出错，
{% if env == 'prod' %}<base href="/app/">{% endif %}和另一处静态<base>同时存在
为什么不能“合并”或“叠加”多个base？
基准路径不是数学加法，而是字符串拼接的起始点。假设你写了：
立即学习“前端免费学习笔记（深入）”；
<base href="/a/"><br><base href="/b/">
那么 <img src="x.png"> 应该解析成 /a/x.png 还是 /b/x.png？规范不定义“叠加语义”，因为这会导致歧义和不可预测的资源加载行为。更关键的是：<base> 影响的是已解析完成的标签（比如它前面的 <link href="style.css"> 已按原始页面 URL 解析完毕），根本不存在“后续所有标签都等两个 base 都读完再统一计算”的机制。
容易被忽略的副作用：document.baseURI 是只读快照
document.baseURI 返回的是第一个 <base> 的 href 值（若无则为当前页面 URL），但它是一个只读属性，不会随 DOM 变化而更新。这意味着：
- JS 中用
new URL('./data.json', document.baseURI)构造路径时，拿到的永远是第一个<base>的值 - 动态移除第一个
<base>并插入新的，document.baseURI不会刷新——它不响应 DOM 变更 - 这个只读特性进一步说明：
<base>不是运行时配置项，而是解析期一次性决策
真正需要多环境路径管理的场景，应该靠构建工具（如 Webpack 的 publicPath、Vite 的 base 配置）或服务端模板变量来处理，而不是试图绕过单 <base> 限制。
