浏览器只认第一个标签，因其解析器仅维护一个不可撤销、不可叠加的基准url值，后续被规范要求静默忽略；放错位置、重复声明或href不合法均导致静默失效，引发404或跳转错乱。
为什么浏览器只认第一个<base>标签
HTML 解析器在遇到 <base> 时，会立即用它的 href 值覆盖当前文档的基准 URL，并且这个动作**不可撤销、不可叠加**。解析器不维护“base 栈”，只存一个生效值。第二个 <base> 出现时，它不会合并或修正前一个，而是直接被忽略——规范明确要求“only the first one is used”。
<base> 放错位置或重复声明的典型错误现象
常见翻车点不是“报错”，而是静默失效，导致资源 404 或跳转错乱：
-
<base href="/app/">→ 浏览器完全忽略，控制台无提示 -
<link href="style.css"> <base href="/app/">→style.css已按原始页面 URL 解析完毕，<base>对它无效 - SSR 模板中 header 和 page 各 render 一个
<base>→ 控制台提示Multiple base elements detected. Only the first one is used.，后一个白写 - Vue/React 组件里用
useEffect(() => { document.head.appendChild(baseEl) })→ 已解析的<img src="x">不重算路径，只影响后续动态创建的元素
href 值不合法也会导致“看似有但实际没用”
即使写了唯一一个 <base>，只要 href 不符合规范，整个标签就被静默丢弃：
-
<base href="static/">→ 缺协议和根斜杠，无效 -
<base href="../assets">→ 含..，无效 -
<base href="https://example.com">→ 结尾没/，Firefox 可能截断成https://example.comcss/ -
<base href="/app">→ 结尾没/，同样有截断风险；正确应为/app/
SPA 部署子路径时，<base> 和前端路由必须配对，不能只靠一个
这是最容易被忽略的协同点：<base href="/subpath/"> 和 Vue Router 的 base: '/subpath/'（或 React Router v6+ 的 basename）是两套独立机制，缺一不可：
- 只设
<base href="/subpath/">：JS chunk 能加载，但router.push('/home')会跳到/home（根路径），不是/subpath/home - 只设前端路由
base：路由跳转正常，但<script src="index.js"></script>加载失败（找不到/index.js，实际应在/subpath/index.js） - 微前端场景下若再叠加 Webpack
publicPath: '/subpath/'，可能造成路径拼两次，变成/subpath/subpath/js/app.js
真正麻烦的从来不是写一行 <base href="/xxx/">，而是构建产物、CDN 缓存、Service Worker 预缓存、第三方 SDK 初始化路径全部依赖这个前缀的一致性——漏掉一个环节，资源就加载失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
