<base>标签兼容性问题源于用法错误而非浏览器不支持：Firefox严格要求href结尾带/，必须置于<head>首位置，仅影响其后纯相对路径，SPA部署需同步配置路由、构建工具和Service Worker。
<base> 标签在所有主流浏览器中都支持，但它不是“写了就稳”的标签——兼容性问题几乎全来自用法错误，而非浏览器不认。
为什么<base>在Firefox里拼错URL
Firefox（及Opera）对 href 值结尾缺 / 的处理很严格：比如 <base href="https://example.com">，后续 <img src="css/app.css"> 会被解析成 https://example.comcss/app.css（中间没斜杠）。这不是bug，是规范定义的字符串拼接逻辑。
-
<base href="https://example.com/">✅ 结尾带/，安全 -
<base href="/myapp">❌ 缺结尾/，Firefox 可能截断为/myappcss/ -
<base href="/myapp/">✅ 根相对路径也必须带结尾/
<base>放错位置等于没写
它只影响其后出现的相对路径。如果 <link href="main.css"> 写在 <base> 前面，那条 CSS 就完全不受控制，仍按当前页面 URL 解析。
- 必须是
<head>中第一个元数据类元素（早于<title>、<meta>、<link>） - 放在
<body>里 → 浏览器直接忽略，无提示 - 服务端模板拼了两个
<base>→ 只有第一个生效，Chrome 控制台会警告Multiple base elements detected
哪些路径真被改，哪些根本不动
<base> 是 HTML 解析层规则，不是运行时代理。它只重写“纯相对路径”——即不以 /、: 或协议开头的字符串。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真受影响：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、CSS 中的background: url(avatar.jpg) - ❌ 完全不受：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html"> - ⚠️ 半受影响：
document.baseURI返回它的值，可用于new URL('data.json', document.baseURI)；但window.location和document.URL完全不变
SPA部署子路径时最容易漏掉的三件事
比如部署到 https://example.com/a/b/c/，只配 <base href="/a/b/c/"> 远不够。
- 前端路由必须同步设
base: '/a/b/c/'（Vue Router / React Router v6+ 不读document.baseURI，得显式传） - 构建工具如 Vite 已设
build.base = '/a/b/c/'，HTML 中就不该再手动加<base>，否则资源路径可能被拼两次（/a/b/c//a/b/c/js/app.js） - Service Worker 预缓存路径若写死
self.location.origin + '/a/b/c/'，但 HTML 没配<base>，会导致缓存和实际加载路径不一致
最常被忽略的点：本地开发时用 http://localhost:3000/ 作 href 比用 / 更安全，能避免和后端路由冲突；而生产环境走 CDN，用完整绝对 URL（如 https://cdn.example.com/v3/）比根相对路径更可控——因为后者一旦部署路径变更，<base> 和路由、构建配置、SW 缓存就得全部跟着动。
