base标签将不以/、http://、https://、//开头的href值（如"section2"或"#faq"）按相对url拼接为/base-path/xxx，非bug而是规范行为；其仅影响html解析阶段纯相对路径，对绝对url、根相对路径及js/css运行时路径无效。
base 标签把所有相对 href 当作路径拼接，不是 bug 是规范行为
浏览器看到 href="section2" 或 href="#faq" 这类不以 /、http://、https://、// 开头的值，一律按「相对 URL」处理。一旦页面中有 <base href="/myapp/">，就会把它们拼成 /myapp/section2 或 /myapp/#faq——这个结果本身合法，但后续行为会出问题：
- 点击
href="section2"会触发完整导航，加载/myapp/section2这个新路径（404 或服务端重定向） - 点击
href="#faq"变成跳转到/myapp/#faq，路径变更 → 触发 SPA 路由重载或滚动重置 - 即使目标是当前页内锚点，浏览器也认为这是「新地址」，不会做平滑滚动
哪些 href 值会被 base 劫持？哪些不会？
判断标准只看开头字符：只要不是以 /、http://、https://、// 开头，就进 base 拼接队列。常见踩坑例子：
-
href="about.html"→ 被拼成/myapp/about.html -
href="../contact.html"→ 被拼成/myapp/../contact.html（最终解析为/contact.html，但中间过程可能出错） -
href="#section2"→ 被拼成/myapp/#section2 -
href="https://example.com/help"→ 不受影响（已是绝对 URL） -
href="/login"→ 不受影响（已是根相对路径）
为什么 Network 面板里看不到报错，却一堆 404？
因为 <base> 的校验是静默的：值不合法（比如 href="assets/"、href="subapp"、href="../static/"），整条标签直接被忽略，不警告也不提示。后果是：
- 你以为配了 base，其实没生效 → 所有相对资源仍按当前页面 URL 解析
- 部署在子路径（如
/admin/）时，<script src="app.js"></script>实际请求的是/admin/app.js，而真实文件在/app.js→ 404 - 检查方法：打开 Elements 面板，确认
<base>在最顶部；再看其href是否以/开头且结尾带/（如/admin/✅，/admin❌）
SPA 中怎么写 a 标签才安全？
原生 <a></a> 在有 base 时不可信，必须主动控制行为：
- 锚点跳转不要用
href="#section2"，改用href={window.location.pathname + "#section2"}（React）或href="${location.pathname}#section2"（服务端渲染） - 更稳妥：用
new URL("#section2", document.baseURI).href—— 这个 API 会正确忽略 base 对 hash 的干扰 - 纯交互按钮（如展开菜单）别用
href="#"，改用href="javascript:void(0)"或绑定click事件并调用event.preventDefault() - 首次加载带 hash（如
/page#faq）时，路由初始化后手动执行document.getElementById("faq")?.scrollIntoView()，因为 DOM 可能还没挂载完
url() 同样生效，但对 JS 中的 fetch('./api')、import('./utils') 完全无效——这种混合影响会让问题只在部分场景复现，排查时容易误判方向。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
