标签仅在html解析阶段生效，只影响纯相对路径（如logo.png），必须置于最前且href为绝对url或根相对路径（结尾带/），否则静默失效导致404；不影响js/css运行时路径、@import、fetch等。
<base> 标签不是“设了就一劳永逸”的路径开关，它只在 HTML 解析阶段生效，且仅作用于特定属性中的纯相对路径；用错形式、放错位置或与运行时行为混用，会直接导致资源 404、锚点失效、甚至 SPA 路由错位。
base href 必须是绝对 URL 或根相对路径，否则静默失效
浏览器对 <base href="assets/"> 这类写法不报错、不警告，但整行被跳过。后续所有 <img src="logo.png"> 都按当前页面 URL 解析，极易 404。
- ✅ 正确：
<base href="https://cdn.example.com/v3/">（绝对 URL，推荐 CDN 场景） - ✅ 正确：
<base href="/myapp/">（根相对路径，结尾必须带/，否则 Firefox 会截断） - ❌ 无效：
<base href="../static/">、<base href="css/">、<base href="%PUBLIC_PATH%/">（未被构建工具替换时就是字面量）
哪些属性真正受 base 影响，哪些完全不受
<base> 只改写 HTML 解析时的纯相对路径（即不以 /、: 或协议开头），不是全局 URL 重写器。
- ✅ 真正受影响：
<a href="about.html"></a>、<img src="icon.png">、<script src="app.js"></script>、<link href="style.css">、<form action="submit.php"></form>、CSS 文件中background: url(avatar.jpg)（注意：这是 HTML 解析时计算的） - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html"></iframe>、<img srcset="logo-2x.png 2x">
SPA 部署在子路径时，base 与前端路由/构建工具易冲突
比如部署在 https://example.com/a/b/c/，<base href="/a/b/c/"> 和框架路由配置必须严格对齐，否则资源加载和跳转行为割裂。
- Vue Router / React Router v6+ 必须显式传入
base: '/a/b/c/'，它们不读document.baseURI - Webpack 的
publicPath和手写的<base href="/a/b/c/">若值相同，资源路径可能被拼两次（如/a/b/c//a/b/c/js/app.js） - Vite 构建时已设
base: '/a/b/c/'，HTML 中就不该再手动加<base>标签 - Service Worker 缓存策略若依赖
self.location.origin + '/a/b/c/'，而 HTML 没配<base>，预缓存路径就错位
a href="#" 和锚点跳转在 base 下会意外重载页面
当存在 <base href="https://example.com/sub/"> 时，<a href="#section2"></a> 会被解析成 https://example.com/sub/#section2，触发一次无意义的页面重载（地址栏变灰、滚动回顶），而非预期的平滑锚点定位。
- 现象：点击“回到顶部”后页面闪一下、控制台无报错但 Network 面板出现一次空 HTML 请求
- SPA 中更隐蔽：原生
<a href="#tab1"></a>仍会触发默认跳转，干扰 Vue Router / React Router 的 hash 处理逻辑 - 解法：改用
<a href="javascript:void(0)"></a>或在 click 事件中调用event.preventDefault()
最常被忽略的一点：CSS 文件内 url() 不走 <base> 规则，而是始终相对于 CSS 文件自身位置解析——这个差异在多级目录部署时极易引发背景图、字体等资源加载失败，且错误难以追溯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
