<base>标签直接重写页面相对URL解析起点，设错即全404且静默失效；href必须为绝对URL或以/开头结尾带斜杠的根相对路径，仅影响HTML解析阶段的纯相对路径（如src/href），对fetch、import等JS/CSS运行时路径无效。
<base> 标签不是“设个前缀”就能用的，它直接重写整个页面相对 URL 的解析起点。设错就全 404，而且浏览器不报错、不警告，只静默失效。
base href 必须是绝对 URL 或根相对路径（以 / 开头且结尾带斜杠）
浏览器只认四种开头：https://、http://、//、/。其他写法一律被丢弃。
-
<base href="static/">→ 无效（缺协议/根斜杠） -
<base href="../assets/">→ 无效（含..） -
<base href="/myapp">→ 无效（结尾没斜杠，Firefox 会截成/myappcss/） -
<base href="/myapp/">→ ✅ 合法，适用于子路径部署 -
<base href="https://cdn.example.com/v3/">→ ✅ 推荐用于 CDN 场景 -
<base href="//cdn.example.com/v3/">→ ✅ 协议相对，自动继承当前页协议
必须放在 <head> 最顶部，且只能有一个
它得在所有 <link>、<script>、<img> 标签之前生效，否则这些资源仍按原页面 URL 解析。
- 写在
<body>里 → 浏览器忽略 - 模板拼接时 header 和 page 各 render 一个 → 只有第一个生效，控制台可能提示
Multiple base elements detected. Only the first one is used. - 用 JS 动态插入（如
document.head.appendChild()）→ 已解析的标签不会重算，只影响后续新创建的元素 - SSR 或前端框架中，避免在子组件里重复注入；统一由服务端或构建工具在 HTML 模板头部写死
哪些路径真受影响，哪些完全绕过
<base> 只在 HTML 解析阶段起作用，不是全局代理。很多你以为它能管的，其实根本没走它。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真受影响：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、<a href="about.html">、CSS 中的background: url(avatar.jpg) - ❌ 完全不受控：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 里的@import "reset.css"、<iframe src="/admin/frame.html"> - ⚠️ 半受影响：
document.baseURI会返回<base href>的值，可用于构造 URL（如new URL('data.json', document.baseURI)），但window.location和document.URL完全不变
最常被忽略的一点：SPA 部署在子路径时，<base href="/subpath/"> 和前端路由的 base 配置（如 Vue Router 的 base: '/subpath/'）是两套独立机制，必须同时显式设置，缺一不可——否则要么资源 404，要么路由跳转错位。
