标签会使未显式指定协议或根路径的 解析异常：href="#section" 变为 /app/#section 导致整页重载；相对路径如 about.html 被强制解析为 /myapp/about.html 易 404；target="_blank" 不自动添加 rel="noopener noreferrer" 存安全风险；js 动态链接、spa 路由等不受其影响。
<base> 标签会让所有未显式指定协议或根路径的 <a href></a> 跳转行为失控，不是 bug，是浏览器严格按 URL 解析规范执行的结果。
href="#section" 点击后页面刷新或滚顶
这是最常被误判为“锚点失效”的问题。一旦设了 <base href="/app/">，href="#section2" 就会被解析成 /app/#section2——浏览器认为这是个新路径，触发完整导航（重载），而不是滚动定位。
- Network 面板能看到一次对
/app/的 200 请求（返回整页 HTML） - SPA 路由（如 Vue Router）不响应，因为
popstate事件的location.pathname变了 - 不要用
href="javascript:void(0)"代替，它破坏语义和键盘可访问性 - 推荐方案：
event.preventDefault()+document.getElementById(id)?.scrollIntoView() - 服务端渲染时可写成
href="${location.pathname}#section2"，客户端用new URL("#section2", document.baseURI).href
href="about.html" 跳转到错误子目录
<base href="/myapp/"> 会让 <a href="about.html"></a> 指向 /myapp/about.html，而非当前页面所在路径下的 /myapp/sub/about.html。这在多级路由页面中极易导致 404。
- 影响范围：所有纯相对路径（不以
/、http://、https://开头的href） - 根相对路径（如
href="/contact"）不受影响，它始终从域名根开始解析 - 绝对 URL（如
href="https://example.com/help"）完全绕过<base> - 若你依赖当前页面路径做跳转（比如文档目录页链接同级文件），就别用
<base href>，改用构建时注入真实路径
target 属性被 base 统一覆盖但不自动加固安全
<base target="_blank"> 确实会让所有没写 target 的 <a></a> 在新标签页打开，但它**不会自动添加** rel="noopener noreferrer"，这会带来 opener 安全风险。
- 点击外链后，新页面可通过
window.opener访问并控制原页面 - 必须手动补全：
<a href="https://xxx" target="_blank" rel="noopener noreferrer"></a> - 若真要用
<base target>，建议用 JS 批量增强：document.querySelectorAll('a[href^="http"]:not([rel])').forEach(a => a.rel = 'noopener noreferrer') - Safari 在某些 iframe 场景下对
<base target>支持不稳定，需降级检测
真正难缠的不是 base 本身，而是它只作用于 HTML 解析阶段——JS 动态生成的链接、router-link、fetch 全都不买账；你以为统一了，其实只是表面平静。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
