base标签仅在html解析时重写纯相对路径的拼接起点，必须以/、http://、https://或//开头且置于head顶部唯一存在，否则静默失效；它不影响js动态加载等运行时路径。
base 标签不是“让所有路径自动加前缀”的开关，它只在 HTML 解析那一刻，重写纯相对路径（如 src="logo.png"）的拼接起点。写错、放错、或指望它管 JS 动态加载，都会静默失败——浏览器不报错，但资源全 404。
base href 值必须以 /、http://、https:// 或 // 开头，否则被静默丢弃
浏览器解析 <base href="static/"> 时，发现它既不是绝对 URL，也不以 / 开头，直接忽略整条标签。后续所有 <img src="icon.svg"> 仍按当前页面 URL 拼接，上线后批量 404。
-
<base href="assets/">❌ 缺协议和根斜杠，无效 -
<base href="../static/">❌ 含..，不被识别 -
<base href="https://example.com/app">❌ 结尾无/，Firefox 可能截断成https://example.com/appcss/ -
<base href="https://cdn.example.com/v3/">✅ 推荐，绝对 URL，CDN 场景最可控 -
<base href="/myapp/">✅ 合法，根相对路径，结尾斜杠不可省
base 必须放在 最顶部，且只能有一个
base 的作用时机是 HTML 自上而下解析过程。它只影响其后出现的相对路径。放错位置或重复声明，等于没写。
- 塞进
→ 浏览器直接忽略，无提示 -
<link href="main.css"> <base href="/app/">→main.css已按原始页面 URL 解析完毕，<base>对它完全无效 - SSR 模板拼接出两个
<base>→ Chrome 控制台提示Multiple base elements detected. Only the first one is used.，仅第一个生效 - 用 JS 动态插入：
document.head.appendChild(baseEl)→ 解析阶段早已结束，已创建的元素不会重算路径
哪些属性真受影响，哪些完全不管
base 是 HTML 解析层规则，不是运行时全局代理。它只改写特定属性中“纯相对路径”（即不以 /、: 或协议开头）的初始拼接逻辑。
- ✅ 真正受影响：
<img src="icon.png">、<script src="app.js"></script>、<link href="style.css">、<a href="about.html"></a>、<form action="submit.php"></form>、CSS 中的background: url(avatar.jpg)（注意：这是 HTML 解析时计算的） - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、new Worker('./worker.js')、<iframe src="/admin/frame.html"></iframe>（根相对路径）、<img src="/absolute/path.png">
SPA 部署子路径时，base 标签只是拼图之一
只设 <base href="/subpath/">，JS chunk 加载正常，但 router.push('/home') 会跳到 /home（根路径），不是 /subpath/home；只设 Vue Router 的 base: '/subpath/'，路由跳转正常，但 <script src="index.js"></script> 404（实际应在 /subpath/index.js）。
- Webpack/Vite 构建需同步配置
publicPath或build.base，否则产出路径与<base>不一致 - Service Worker 预缓存路径、CDN 缓存键、甚至
document.baseURI的返回值，都依赖这个前缀严格对齐 - 微前端场景下，子应用的
publicPath+ 主应用的<base href>+ 路由 base 三者重复拼接，可能变成/subpath/subpath/js/app.js
真正麻烦的不是写错一行 <base href="/app/">，而是构建产物、CDN 缓存、Service Worker、前端路由、甚至第三方 SDK 内部的路径推导，全部隐式依赖这个值的一致性——漏掉一个环节，就出现资源加载失败或路由错位，且往往没有明确报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
