写错会静默丢弃，导致img、script等相对路径批量404；其href必须以http://、https://、//或/开头且根相对路径须结尾带/，且必须位于最前、唯一存在。
<base> 写错不会报错，但所有 <img src="logo.png">、<script src="app.js"></script> 会批量 404——因为浏览器直接丢弃整条标签，不警告也不提示。
检查 <base href> 值是否合法且生效
浏览器只认四种开头：http://、https://、//、/；且根相对路径必须以 / 开头并以 / 结尾。其他写法一律静默失效。
-
<base href="assets/">❌ 缺协议和根斜杠，被丢弃 -
<base href="../static/">❌ 含..，规范禁止 -
<base href="/myapp">❌ 结尾无/，Firefox/Opera 会截断成/myappcss/app.css -
<base href="/myapp/">✅ 合法根相对路径 -
<base href="https://cdn.example.com/v3/">✅ 推荐用于 CDN 场景
确认 <base> 位置和数量是否正确
<base> 必须在 最顶部、所有其他标签（包括 <title></title>）之前，且全文只能出现一次。
- 放在
里 → 浏览器直接忽略 -
<link href="main.css"> <base href="/app/">→main.css已解析完毕，<base>对它无效 - SSR 模板或组件内动态插入两个
<base>→ 只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used. - 用 JS 动态创建并
appendChild()→ 解析阶段早已结束，完全无效
前端路由与构建配置必须显式对齐，不能依赖 <base>
<base href="/subapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径——它们根本不读 document.baseURI，必须手动传入 base 配置项。
- Vue Router：
createRouter({ base: '/subapp/' }) - React Router v6+：
<router basename="/subapp"></router> - Vite：
build.base或base配置项设为/subapp/ - Webpack：
publicPath设为/subapp/，但若 HTML 中又写了<base href="/subapp/">，资源路径会被拼两次 → 请求/subapp//subapp/js/app.js导致 404
哪些资源真受影响，哪些完全不受控
<base> 是 HTML 解析层规则，不是运行时重写器。它只改写特定属性中“纯相对路径”的初始拼接逻辑。
- ✅ 真生效：
<img src="logo.png">、<script src="app.js"></script>、<link href="style.css">、<form action="submit.php"></form>、CSS 文件里的background: url(avatar.jpg)（注意：这是 HTML 解析时计算的） - ❌ 完全不受控：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html"></iframe>、<img srcset="logo-2x.png 2x"> - ⚠️ 半受影响：
document.baseURI会返回<base href>的值，可用于new URL('data.json', document.baseURI)，但window.location和document.URL完全不变
最易被忽略的是：它只在 HTML 解析阶段起作用，且只影响硬编码的纯相对路径。一旦混用构建工具的 publicPath、前端路由的 base、Service Worker 的缓存路径，三者稍有不一致，就立刻表现为资源 404 或跳转错位，而控制台始终沉默。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
