标签仅在HTML解析阶段重置纯相对路径（如logo.png）的解析起点，必须为绝对URL或以/开头且结尾带斜杠的根相对路径，否则静默失效；它不影响JS/CSS运行时路径，前端路由需显式配置base参数对齐。
<base> 标签在多级目录下不能“处理”路径，它只做一件事：重写纯相对路径（如 logo.png、js/app.js）的解析起点。写错值、放错位置、或和前端路由/构建工具冲突，反而让所有资源批量 404。
base href 必须是绝对 URL 或以 / 开头且结尾带斜杠的根相对路径
浏览器对 <base href=""> 的校验极严：只要值不以 http://、https://、// 或 / 开头，整条标签就被静默丢弃——控制台无提示，但后续所有 <img src="x" alt="HTML中base标签处理多级目录路径的方法" >、<script src="y"></script> 全部回退到当前页面 URL 解析，404 风险极高。
-
href="/subapp/"✅ 合法，适用于部署在https://example.com/subapp/的场景；结尾斜杠不可省，否则 Firefox/Opera 会把css/app.css拼成/subappcss/app.css -
href="https://cdn.example.com/v3/"✅ 推荐用于 CDN 场景，协议、域名、路径全明确 -
href="subapp/"、href="../static/"、href="/subapp"❌ 全部无效 -
href="${PUBLIC_PATH}"若未被构建工具替换，就是字面量字符串，同样失效
哪些资源受 base 影响，哪些完全不受
<base> 只在 HTML 解析阶段起作用，影响的是属性中“纯相对路径”的初始解析逻辑，不是运行时代理。
- ✅ 真正受影响：
<img src="icon.png" alt="HTML中base标签处理多级目录路径的方法" >、<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')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="/admin/frame.html"></iframe>（根相对路径直接拼域名）、<img srcset="logo-2x.png 2x" alt="HTML中base标签处理多级目录路径的方法" >
SPA 多级部署时，base 和前端路由必须显式对齐
<base href="/myapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们根本不读 document.baseURI，必须手动传入 base 配置项。漏配任一，就会出现“资源加载走 /myapp/js/app.js，点击链接却跳到 /home”这种割裂现象。
立即学习“前端免费学习笔记（深入）”；
- Vue Router：
createRouter({ base: '/myapp/' }) - React Router v6+：
<router basename="/myapp"></router> - Webpack 的
publicPath和 Vite 的base配置若与 HTML 中的<base href="/myapp/">同时存在且值相同，资源路径可能被拼两次（如/myapp//myapp/js/app.js） - Service Worker 缓存策略若依赖
self.location.origin + '/myapp/'，而 HTML 没配<base>，预缓存路径就错位
多个 base 标签或位置错误的后果
<base> 必须放在 最前面，且只能有一个。浏览器只认第一个，其余全被忽略。放到 里？直接失效。
- 旧版 IE 遇到多个
<base>可能直接崩 - 本地开发建议用
href="http://localhost:3000/"而非href="/"，避免和后端路由冲突 - file:// 协议下，
<base href>可能被 Chrome 静默忽略，慎用 - 微前端或 SSR 场景下，硬塞
<base>容易掩盖路径管理混乱的本质问题，优先用构建工具统一控制更可靠
最容易被忽略的是：HTML <base> 和前端路由、构建工具配置这三者之间没有自动同步机制，任何一方没对齐，路径就断在某个环节——而且往往只报 404，不告诉你哪一层出错了。
