标签必须用绝对 url 或根相对路径（结尾带 /），且须置于 最顶部唯一存在；仅影响纯相对路径的 src/href/action 等属性，不影响 js 动态请求或 @import。
<base> 标签不是“设个路径就完事”的配置项，它是一把双刃剑：用对了能统一资源加载逻辑，用错了会静默失效、引发大面积 404，且浏览器通常不报错、不警告。
href 值必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只接受以 https://、http://、// 或 / 开头的 href 值。其他写法一律被忽略，且无提示。
-
<base href="static/">→ 缺协议和域名，被忽略 -
<base href="../assets/">→ 含..，被忽略 -
<base href="https://example.com">→ 缺尾部/，Firefox/Opera 可能截断成https://example.comcss/app.css -
<base href="/myapp">→ 同样缺/，风险一致；正确应为<base href="/myapp/">
✅ 推荐写法：<base href="https://cdn.example.com/v2.3/">（生产环境最稳妥）
✅ 合法写法：<base href="/myapp/">（SPA 子路径部署必需）
✅ 可用写法：<base href="//cdn.example.com/v2.3/">（自动继承当前协议）
必须放在 最顶部，且只能有一个
HTML 解析是自上而下的。<base> 的作用是重置后续所有相对 URL 的解析起点，所以它必须是 中第一个元数据类标签。
- 错误顺序：
<title>My Page</title> <link href="css/main.css"> <base href="https://cdn.example.com/">→main.css已按原页面 URL 解析完毕，不受控 - 正确顺序：
<base href="/myapp/"> <title>My App</title> <link href="main.css"> <script src="app.js"></script> - 写在
里？直接被忽略，不报错也不提示 - 多个
<base>？只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used.
哪些属性真受影响，哪些完全不受控
<base> 只在 HTML 解析阶段起作用，改写的是 src、href、action 等属性中**纯相对路径**（即不以 /、: 或协议开头）的初始拼接逻辑。
- ✅ 明确受影响：
<img src="logo.png">、<script src="app.js"></script>、<link href="style.css">、<form action="submit.php"></form>、CSS 中的background: url(avatar.jpg) - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="page.html"></iframe> - ⚠️ 半受影响：
document.baseURI返回<base href>的值，可用于构造 URL（如new URL('data.json', document.baseURI)），但window.location和document.URL完全不变
SPA 部署子路径时，base 和路由必须严格对齐
单页应用部署在子路径（如 https://a.com/myapp/）时，<base href="/myapp/"> 和前端路由的 base 配置是两套独立机制，不自动同步。
- Vue Router v4+ 必须显式传入
createRouter({ base: '/myapp/' })，它不读document.baseURI - React Router v6+ 同理，需设置
<browserrouter basename="/myapp/"></browserrouter> - 若只配了 HTML 的
<base>而没配路由base，router.push('/home')会跳到根路径，而非/myapp/home - 微前端场景下，子应用若同时设了 Webpack
publicPath和<base>，资源路径可能被拼两次（如/myapp/myapp/js/app.js）
构建工具（Vite/Webpack）自动注入 <base> 比手写更可靠；手写时最容易被忽略的，是 href 尾部那个看似微小、实则致命的 /。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
