<base> 标签仅对纯相对路径（如 logo.png）生效，对含协议、//、/ 开头的 URL 完全无效；合法值仅限以 / 结尾的根相对路径或完整绝对 URL；它不作用于 JS 运行时、CSS @import 或 url()、fetch 等，SPA 部署时需与路由和构建工具配置严格对齐。
<base> 标签对绝对路径（含协议、// 或 / 开头）完全无效——这不是 bug，是 HTML 规范明确规定的。它只接管“纯相对路径”，其他一律跳过。
哪些 URL 会被 <base href="..."> 忽略？
浏览器在 HTML 解析阶段就直接丢弃以下写法，不拼接、不报错、不警告：
-
<img src="https://cdn.com/logo.png">—— 含协议，走原始地址 -
<script src="//unpkg.com/react@18">—— 协议相对，不依赖<base> -
<link href="/css/main.css">—— 根相对路径，直接拼到当前 origin，<base>不介入 -
<iframe src="/admin/frame.html">—— 同上，base 不生效
<base href> 的合法值只有两种
写错就等于没写，且浏览器静默忽略，上线后批量 404 风险极高：
-
href="/myapp/"✅ 根相对路径：必须以/开头，且结尾必须带/；否则 Firefox/Opera 可能截断为/myappcss/app.css -
href="https://cdn.example.com/v3/"✅ 绝对 URL：协议 + 域名 + 路径全明确，CDN 场景最可控 -
href="assets/"❌ 静默失效：缺协议、缺根斜杠，被浏览器直接丢弃 -
href="../static/"❌ 静默失效：含..，规范禁止 -
href="https://example.com"❌ 风险：结尾无/，部分浏览器会错误拼接
<base> 实际影响的属性有哪些？
它只作用于 HTML 解析时硬编码的纯相对路径，且仅限特定属性：
立即学习“前端免费学习笔记（深入）”；
- ✅ 真正生效：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、<form action="submit.php">、CSS 文件内background: url(icon.svg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve） - ❌ 完全不受控：
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<source srcset="logo-2x.png 2x"> - CSS 中的
url()是相对于 CSS 文件自身位置解析的，和<base>无关；JS 运行时构造的路径（如new URL('data.json', document.baseURI)）虽可读取document.baseURI，但不会自动改写fetch行为
SPA 部署子路径时最易踩的坑
当应用部署在 https://example.com/a/b/c/ 时，<base> 和框架配置必须严格对齐，否则行为割裂：
- Vue Router / React Router v6+ 完全不读
document.baseURI：<base href="/a/b/c/">不会让路由自动识别子路径；必须显式设base: '/a/b/c/'（Vue）或basename="/a/b/c/"（React） - Webpack 的
publicPath和<base href="/a/b/c/">若同时配置且值相同，资源路径可能被拼两次（如/a/b/c//a/b/c/js/app.js），导致 404 - 更稳妥做法：只用构建工具统一控制资源前缀（如 Vite 设
build.base = "/a/b/c/"），HTML 中不写<base>；或仅用<base>控制静态资源，构建工具设publicPath: ""（空字符串），避免叠加
真正麻烦的从来不是写对 <base>，而是它只管 HTML 解析层那一瞬，却常被误当成全局路径重写器——结果是资源加载走 base，路由跳转走根，fetch 请求又走页面 URL，三套逻辑并存，问题定位极难。
