标签必须配置为绝对url或结尾带斜杠的根相对路径（如/myapp/），且置于最顶部唯一存在，否则静默失效导致批量404；仅影响html解析阶段的纯相对路径（如src="logo.png"），不影响js动态请求、css@import等。
<base> 标签确实能减少路径维护成本，但前提是它被正确配置——写错一个字符、放错一个位置，就等于没写，还可能引发静默 404。
base href 必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只认以 http://、https://、// 或 / 开头的 href 值。其他写法一律被丢弃，不报错也不警告。
-
href="assets/"❌ 缺协议和根斜杠，整条标签失效 -
href="../static/"❌ 含..，不被识别 -
href="/myapp"❌ 结尾无斜杠，Firefox 可能截断为/myappcss/ -
href="https://cdn.example.com/v3/"✅ 推荐用于 CDN 场景 -
href="/myapp/"✅ 合法根相对路径，部署子路径时必须用这个
base 必须放在 最顶部且只能有一个
<base> 的作用时机是 HTML 解析自上而下的过程，它只影响其后出现的相对路径。顺序或数量错了，等于白配。
- 放在
里 → 浏览器直接忽略 -
<link href="main.css"> <base href="/app/">→main.css已解析完毕，不受控 - SSR 模板拼接出两个
<base>→ Chrome 控制台提示Multiple base elements detected. Only the first one is used.，第二个被丢弃 - 用 JS 动态插入：
document.head.appendChild(baseEl)→ 解析阶段早已结束，无效
哪些路径真被 base 影响，哪些完全不管
<base> 是 HTML 解析层规则，不是运行时代理。它只改写特定属性中“纯相对路径”（即不以 /、: 或协议开头）的初始拼接逻辑。
- ✅ 真受影响：
<img src="icon.png">、<script src="app.js"></script>、<link href="style.css">、<form action="submit.php"></form>、CSS 中的background: url(avatar.jpg)（注意：这是 HTML 解析时计算的） - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html"></iframe>（根相对路径）、<img srcset="logo-2x.png 2x">
与前端路由、构建工具混用时最容易翻车
SPA 部署在子路径（如 https://example.com/myapp/）时，<base href="/myapp/"> 和框架路由配置必须严格对齐，否则资源加载和导航行为割裂。
- Vue Router 要显式传入
base: '/myapp/'，它不读document.baseURI - React Router v6+ 要用
<router basename="/myapp"></router> - Vite 构建时若已设
build.base: '/myapp/'，HTML 中就不该再手动加<base>标签 - Webpack 的
publicPath和手写<base href="/myapp/">若同时存在且值相同，会导致路径被拼两次（如/myapp//myapp/js/app.js），结果 404
最常被忽略的一点：base 标签生效后，所有相对路径都按它重算，但开发者仍习惯性地按原始页面路径去调试——比如看到 <img src="logo.png"> 就默认它该在当前目录下找，而忘了浏览器实际请求的是 /myapp/logo.png。查 404 时，第一反应应该是打开 DevTools → Elements → 右键图片 → “Open in Sources panel”，看底部显示的 Request URL 是不是已经偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
