会劫持所有相对 url 跳转，如 变为 /subapp/page.html；仅 / 开头或带协议的 url 不受影响；其值必须以 / 结尾才生效，否则标签被静默丢弃。
base href 会劫持所有相对 href 的跳转行为
只要写了 <base href="/subapp/">，所有没写协议、没写根路径的 <a href="page.html"></a> 就会跳到 /subapp/page.html，而不是当前页面所在目录下的 page.html。这包括普通链接、表单提交（method="get" 时）、<link rel="next"> 等所有 HTML 解析阶段的相对 URL 跳转。
常见翻车点：
-
<a href="user/profile"></a>→ 实际跳转/subapp/user/profile（不是当前页同级的user/profile） -
<a href="..%2Fadmin"></a>这种编码过的相对路径仍被 base 劫持，浏览器不校验语义，只看是否以/、http://等开头 -
<a href="#"></a>变成/subapp/#，触发完整页面重载，滚动重置，锚点失效
base 不影响以 / 开头或带协议的 href
<a href="/home"></a> 和 <a href="https://example.com/login"></a> 完全绕过 <base> 控制——它们走的是绝对路径解析逻辑，和 document.baseURI 无关。
但要注意边界情况：
-
<a href="//api.example.com/data"></a>是协议相对 URL，也不受 base 影响 -
<a href="javascript:void(0)"></a>、<a href="data:text/plain,ok"></a>同样不受控 -
<a href="about:blank"></a>属于特殊 scheme，base 无效
前端路由跳转（router.push）和 base 标签完全无关
router.push('/home') 的目标地址由路由库的 base 配置决定，比如 Vue Router 的 createWebHistory('/subapp/') 或 React Router 的 <router basename="/subapp"></router>。它根本不会读 document.baseURI，也不会拼接 <base href> 的值。
后果很直接：
- HTML 里写了
<base href="/subapp/">，但 Vue Router 没配base: '/subapp/'→ 点击 Link 跳到/home，不是/subapp/home - React Router v6+ 的
<link to="/dashboard">生成的 URL 完全取决于basename，和 base 标签字符串是否一致毫无关系 - 两者值不一致时，页面可能白屏（路由没匹配上），或者资源加载路径对、跳转路径错，行为割裂
多级子路径下 href 值必须结尾带斜杠
<base href="/a/b/c"> 是无效写法，浏览器静默丢弃整条标签——控制台无提示，但所有 src="logo.png" 全部回退到当前页 URL 解析，上线即 404。
真正生效的只有：
-
<base href="/a/b/c/">（根相对路径，结尾斜杠不可省） -
<base href="https://cdn.example.com/a/b/c/">（绝对 URL，协议+域名+路径全明确）
Firefox 和 Opera 对缺斜杠尤其敏感：background: url(icon.png) 在 CSS 中会被拼成 /a/b/cicon.png（中间斜杠被吃掉），Chrome 虽然容忍，但跨浏览器一致性必须靠结尾斜杠兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
