<base> 标签是MPA路径管理的硬性基础设施，必须为绝对URL或根相对路径（结尾带斜杠），且须置于<head>最顶部唯一声明；仅影响HTML解析时的纯相对路径资源引用，与JS运行时路径无关。
<base> 标签在多页面网站（MPA）中不是“可选优化项”，而是路径管理的硬性基础设施——用错就批量 404，写对能省掉 90% 的重复路径拼接。它不解决动态路由问题，只管 HTML 解析那一刻的静态资源起点。
base href 必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只认 href 值以 https://、http://、// 或 / 开头，其余一律静默丢弃。你不会看到控制台报错，但所有 <img src="logo.png"> 都会 fallback 到当前页面 URL 解析，上线即崩。
-
href="assets/"、href="../static/"、href="%PUBLIC_URL%/"→ 全部无效，<base>形同虚设 -
href="/myapp"→ 缺尾斜杠，Firefox/Opera 可能截断成/myappcss/，导致style.css请求错位 -
href="https://cdn.example.com/v3/"→ ✅ 推荐，部署可控，不依赖当前页上下文 -
href="/myapp/"→ ✅ 合法，适用于部署在子路径的 MPA，但需确保后端路由也匹配该前缀
必须放在 <head> 最顶部且唯一
<base> 的作用时机是 HTML 自上而下解析过程，它只影响其后出现的标签。放错位置 = 白写；重复声明 = 只有第一个生效，Chrome 控制台会提示 Multiple base elements detected. Only the first one is used.
- 放在
<meta>或<title>后面 → 已解析的<link href="main.css">不受控 - 放进
<body>→ 浏览器直接忽略，无任何提示 - SSR 模板拼接时 header 和 page 各 render 一个 → 后者被丢弃，资源路径混乱
- 用 JS 动态插入：
document.head.appendChild(baseEl)→ 已解析的元素不重算，只影响后续新创建的 DOM
哪些属性真受影响，哪些完全绕过 base
<base> 是 HTML 解析层规则，不是运行时代理。它只改写特定属性中“纯相对路径”（即不以 /、: 或协议开头）的初始拼接逻辑。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真正受影响：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、<a href="about.html">、<form action="submit.php">、CSS 中的background: url(avatar.jpg)（注意：这是 HTML 解析时计算的） - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html">（根相对路径）、<img srcset="logo-2x.png 2x"> - ⚠️ 半受影响：
document.baseURI返回<base href>值，可用于new URL('data.json', document.baseURI)，但window.location和document.URL完全不变
MPA 与后端路由、CDN、缓存策略的协同陷阱
多页面网站通常依赖后端路由（如 Nginx location 块、Express 路由中间件），<base href="/blog/"> 必须和后端服务的静态资源挂载路径、CDN 缓存目录、Service Worker 预缓存列表严格对齐。
- 后端未配置
location /blog/ { alias /var/www/blog/; }→ 所有src="js/app.js"请求 404 - CDN 缓存规则基于
https://example.com/blog/js/app.js，但 HTML 中<base href="https://cdn.example.com/blog/">→ 缓存键不一致，命中失败 - Service Worker 预缓存
['/blog/style.css']，但 HTML 里<base href="/other/">→ 实际请求的是/other/style.css，缓存失效 - 本地开发用
http://localhost:8080/blog/作href比用/blog/更安全，避免和后端根路由冲突
最常被忽略的一点：MPA 的 <base> 不影响任何 JS 运行时构造的路径，包括 location.href 跳转、history.pushState()、表单提交后的重定向响应头 Location:。这些全由后端或 JS 控制，和 <base> 无关。别指望它“统一所有路径”。
