标签是单向静默解析规则，必须为绝对url或根相对路径且结尾带/，须置于最顶部唯一存在；仅影响html中纯相对路径属性，对js动态请求无效。
<base> 标签不是“设个路径就完事”的开关，它是一条单向、静默、不可逆的解析规则——用错就 404，没错也未必如你所想。
base href 值必须是绝对 URL 或根相对路径，否则浏览器直接丢弃
浏览器只认以 https://、http://、// 或 / 开头的 href 值。其他写法（哪怕只差一个字符）整条 <base> 都被静默忽略，控制台零提示，但所有 src="logo.png" 全部按当前页面 URL 解析，上线后批量 404。
-
<base href="static/">❌ 缺协议和域名，无效 -
<base href="../assets/">❌ 含..，无效 -
<base href="https://example.com">❌ 结尾没/，Firefox/Opera 会把css/app.css拼成https://example.comcss/app.css -
<base href="/myapp">❌ 同样缺结尾斜杠，风险一致 -
<base href="https://cdn.example.com/v3/">✅ 推荐：明确、跨环境稳定 -
<base href="/myapp/">✅ 合法：根相对路径，结尾必须带/ -
<base href="//cdn.example.com/v3/">✅ 可用：协议相对，自动继承http或https
base 必须放在 最顶部，且只能有一个
HTML 解析是自上而下的。<base> 的作用是重置后续所有相对 URL 的解析起点，所以它必须是 中第一个元数据类标签。放错位置或重复声明，不是报错，而是“降级”或“失效”。
- 错误顺序：
<title>My Page</title> <link href="style.css"> <base href="/static/">→style.css仍按当前页 URL 加载 - 正确顺序：
<base href="/myapp/"> <title>My Page</title> <link href="style.css"> <img src="logo.png"> - SSR 模板中 header 和 page 各 render 一个
<base>→ 控制台提示Multiple base elements detected. Only the first one is used.，第二个被无视 - 动态插入：
document.head.appendChild(baseEl)→ 已解析的<img src="x">不会重算，只影响之后新创建的元素
哪些属性真受影响，哪些完全绕过 base
<base> 只在 HTML 解析阶段起作用，改写的是纯相对路径（即不以 /、: 或协议开头）的初始解析逻辑。它不是运行时代理，也不是全局 URL 重写器。
- ✅ 明确受影响：
<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>的值，可用于new URL('data.json', document.baseURI)；但window.location和document.URL完全不变
SPA 部署子路径时，base 标签和前端路由必须严格对齐
Vue Router 的 base 配置项和 HTML 的 <base href="/subpath/"> 是两套独立机制，不自动同步。只配一个，另一个大概率出问题。
- 只设
<base href="/subpath/">：JS chunk 能加载，但router.push('/home')会跳到/home（根路径），不是/subpath/home - 只设 Vue Router
base: '/subpath/'：chunk 文件 404，因为<script src="js/app.js"></script>还是按当前页 URL 解析 - 微前端场景下，子应用若同时设了 Webpack
publicPath和<base>，资源路径可能被拼两次，变成/subpath/subpath/js/app.js - Service Worker 缓存策略若依赖
self.location.origin + '/subpath/'，而 HTML 没配<base>，则预缓存路径错位
最易被忽略的一点：base 标签无法解决 JS 动态路径问题，比如 fetch() 或 import()，它们永远只认当前页面 URL；而 CSS 中的 url() 会被 base 改写，但 @import 不会——这种不一致性，往往在联调后期才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
