<base> 标签的 href 属性强制重写所有纯相对 URL 的解析基准，必须为绝对 URL 或根相对路径（以 / 或协议开头），且须置于 <head> 最前、唯一；仅影响 HTML 解析阶段的纯相对路径（如 <img src="x">），对 fetch、import 等运行时路径无效。
<base> 标签的 href 属性不是“辅助路径工具”，而是强制重写整个 HTML 解析器对所有纯相对 URL 的基准起点——设错一个字符，<img src="logo.png"> 就 404，且浏览器通常不报错，只静默失败。
base href 必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只认以 http://、https://、// 或 / 开头的 href 值。其他写法（如 assets/、../static/、%PUBLIC_URL%/）会被完全忽略，退回到用当前页面 URL 当基准，上线后批量 404。
-
https://cdn.example.com/v3/✅ 推荐用于 CDN 场景，协议、域名、路径明确可控 -
/myapp/✅ 适用于 SPA 部署在子路径，结尾斜杠不能少（否则 Firefox 可能截断成/myappcss/） -
//cdn.example.com/v3/✅ 协议相对，自动继承当前页的http或https -
https://example.com❌ 缺末尾斜杠，部分浏览器会错误拼接路径 -
static/❌ 静默失效，等于没写
base 必须放在 <head> 最前面且只能有一个
<base> 只对它之后出现的标签生效。如果写在 <link> 或 <script> 后面，那些资源早已按原始页面 URL 解析完毕，<base> 对它们完全无效。
- 正确顺序：
<head><base href="https://cdn.example.com/v3/"><title></title><link href="main.css"></head> - 错误位置：放在
<body>里 → 浏览器直接忽略，无警告 - 多个
<base>→ 只有第一个生效，其余被静默丢弃；Vue/React 组件中动态插入document.head.appendChild()完全无效（解析阶段早已结束） - 服务端模板拼接时容易重复注入，需在渲染前检查是否已存在：
document.querySelector('base')
哪些路径真受影响，哪些完全不受控
<base> 只作用于 HTML 解析阶段的纯相对路径（即不以 /、: 或协议开头），不是全局路径代理。很多你以为它能管的，其实完全不管。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真正受影响：
<img src="icon.png">、<script src="app.js">、<link href="theme.css">、<a href="about.html">、<form action="submit.php">、CSS 文件中background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve） - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html">（根相对路径直接拼域名）、<img srcset="logo-2x.png 2x"> - ⚠️ 特别注意：
<a href="#">在<base href="/sub/">下会跳转到/sub/#，触发页面重载和滚动回顶
SPA 部署在子路径时，base 和构建配置易冲突
比如部署在 https://example.com/a/b/c/，<base href="/a/b/c/"> 必须与前端路由和打包配置严格对齐，否则资源加载和跳转行为割裂。
- Vue Router / React Router v6+ 不读
document.baseURI，必须显式传入base: '/a/b/c/' - Webpack 的
publicPath和手写的<base href="/a/b/c/">若值相同，可能导致路径被拼两次（如/a/b/c//a/b/c/js/app.js） - Vite 构建时若已设
base: '/a/b/c/'，HTML 中就不该再手动加<base>标签 - Service Worker 缓存策略若依赖
self.location.origin + '/a/b/c/'，而 HTML 没配<base>，预缓存路径就错位
真正麻烦的不是怎么写 <base>，而是它只管 HTML 解析那一刻的静态属性，却常被误当成运行时路径控制器。一旦混用构建配置、框架路由、JS 动态请求，问题就藏在看不见的地方——比如 background: url(logo.png) 加载失败，你却在 JS 里查 fetch 路径。
