base标签写错会导致链接跳转看似“随机失效”，因其校验为“全有或全无”：href值不以http://、https://、//或/开头即被静默丢弃，不报错但引发404、锚点重载、路由错位；合法值仅/myapp/（根相对路径，首尾均需/）或https://cdn.example.com/v3/（绝对url，结尾带/）；需与spa路由base配置、构建工具publicpath严格一致，且仅影响html解析阶段的纯相对路径。
base 标签写错会导致链接跳转看似“随机失效”——点不动、跳错页、刷新重载、锚点滚顶，但控制台干净得像没出事。它不报错，只静默破坏解析规则。
检查 href 值是否合法且被浏览器真正采纳
浏览器对 <base href> 的校验是“全有或全无”：只要值不以 http://、https://、// 或 / 开头，整条标签就被丢弃，且不发任何警告。
-
/myapp❌ 缺末尾斜杠 → Firefox 会截成/myappcss/，Chrome 可能勉强工作但不可靠 -
assets/、../static/、subapp/❌ 全部非法，<base>形同虚设 -
/myapp/✅ 根相对路径（开头和结尾都必须是/） -
https://cdn.example.com/v3/✅ 绝对 URL（协议+域名+路径，结尾带/）
打开 DevTools → Elements → 确认 <base> 是否位于 最顶部；再看 Network 面板里 app.js 或 style.css 的请求 URL 是否符合你预期的部署路径——这是最直接的生效验证。
确认 <base> 对 href="#section" 的干扰是否正在发生
所有以 # 开头的 href 值，在有 <base href="/myapp/"> 时，都会被拼成 /myapp/#section。这不是 bug，是规范行为，但它会触发页面重载而非锚点滚动。
- 点击后地址栏变灰、页面闪一下、滚动回到顶部 → 典型表现
- Network 面板看到一次对
/myapp/的 200 请求（返回完整 HTML）→ 证实发生了重载 -
href="javascript:void(0)"或event.preventDefault()是必要拦截手段，不能依赖原生行为 - 用
new URL("#section2", document.baseURI).href可安全生成当前页锚点 URL，绕过 base 拼接
排查 <base> 与 SPA 路由配置是否割裂
HTML 的 <base href> 和 Vue Router / React Router 的 base 配置是两套独立机制，互不读取、互不校验。配错一个，跳转就错一半。
-
createWebHistory('/myapp/')和<base href="/myapp/">必须字面量完全一致（包括末尾斜杠） - Vite 已设
build.base: '/myapp/'，再手动加<base href="/myapp/">→ 资源路径可能变成/myapp//myapp/js/app.js（双斜杠） - Webpack 的
publicPath: '/'+<base href="/myapp/">→ chunk 加载地址为/myapp/xxx.js，但文件实际在/xxx.js，必 404 -
<base target="_blank">是隐形炸弹：会让所有没显式写target的<a></a>默认新开页，极难定位
区分哪些路径真受 <base> 影响，哪些完全不受控
<base> 只在 HTML 解析阶段起作用，只改写纯相对路径（既无协议、也无 / 开头）的硬编码属性。它不是运行时重写器。
- ✅ 真受影响：
<img src="logo.png">、<script src="app.js"></script>、<link href="style.css">、CSS 中的url(icon.svg) - ❌ 完全不受控：
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css" - ⚠️ 半受影响：
document.baseURI返回该值，可用于new URL('data.json', document.baseURI)，但window.location不变
最容易被忽略的是：<base> 对 JS 运行时路径毫无影响，却常被误认为能统一管理所有 URL。它只管 HTML 刚加载那几毫秒的解析逻辑，之后的事，它不管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
