<base> 标签是 HTML 解析阶段的全局基准 URI 强制器，非法值（如无末尾 /、含 ..、非绝对或根相对路径）会被浏览器静默忽略，导致资源 404、锚点导航异常、fetch/import 请求错位；Vite/Webpack 已配置 base 时再手动添加 <base> 会引发双斜杠 404。
<base> 标签不是路径“优化工具”，而是 HTML 解析阶段的全局基准 URI 强制器；一旦配置不当，它会静默劫持所有纯相对路径的解析逻辑，导致资源 404、锚点重载、fetch 请求错位，且浏览器不报错、不警告。
base href 值非法时浏览器直接忽略，但你根本不知道
浏览器只接受两种合法形式：href="/subapp/"（根相对路径，开头和结尾都必须是 /）或 href="https://cdn.example.com/subapp/"（绝对 URL，协议+域名+路径，结尾也必须带 /）。其他写法一律被静默丢弃：
-
href="subapp/"→ 无协议、无根斜杠，无效 -
href="../static/"→ 含..，规范禁止，丢弃 -
href="/subapp"→ 缺末尾/，Firefox/Opera 会截断拼接（css/app.css变成/subappcss/app.css） -
href="%PUBLIC_PATH%/"→ 构建未替换时就是字面量字符串，无效
后果：所有 <img src="logo.png">、<script src="app.js"> 回退到当前页面 URL 解析，上线后批量 404，Network 面板里请求地址完全不对，但控制台空空如也。
a href="#" 点击后页面闪一下、滚回顶，其实是 base 在劫持锚点
当存在 <base href="/admin/"> 时，<a href="#section2"> 被浏览器解析为 /admin/#section2 —— 这是一个新 URL，触发完整导航（地址栏变灰、history 新增条目、滚动重置），而非平滑锚点定位。
立即学习“前端免费学习笔记（深入）”；
- 这不是 JS 事件没绑定，也不是 CSS 问题，是 HTML 解析层的行为
- 修复不是删
<base>，而是改写链接：<a href="javascript:void(0)" onclick="scrollToSection('section2')">，或用event.preventDefault()拦截 - Vue Router / React Router 的
<Link to="#section2">同样受影响，需配合scrollIntoView手动处理
fetch('./api/user') 和 import() 也会被 base 劫持，但很多人以为不会
<base href="/admin/"> 会让 fetch('./api/user') 实际请求 https://example.com/admin/api/user，因为 fetch 的相对 URL 默认以 document.baseURI 为基准（不是当前 JS 文件位置）。
- 该行为在 Chrome/Firefox/Safari 中一致，且无法靠服务端重定向绕过
-
import('./utils.js')报Failed to resolve module specifier，原因相同 -
new Image().src = 'icon.png'、XMLHttpRequest.open('GET', 'data.json')全部走同一套解析逻辑 - 但
@import "reset.css"、<iframe src="/admin/frame.html">、<img srcset="logo-2x.png 2x">不受影响（它们不是 HTML 解析阶段的纯相对路径）
Vite/Webpack 与手写 base 混用，必然触发双斜杠 404
Vite 的 build.base 或 Webpack 的 publicPath 已在打包时重写了所有静态资源路径（如 js/app.js → /admin/js/app.js）。此时再手动加 <base href="/admin/">，浏览器二次解析会把已带前缀的路径再拼一次：
- 预期请求：
/admin/js/app.js - 实际发出：
/admin//admin/js/app.js（中间两个//）→ 404 - Service Worker 预缓存路径错位、微前端子应用 chunk 加载中断，全由此引发
- 正确做法：Vite 已设
base: '/admin/'，HTML 中就不要手写<base>；Webpack 同理，publicPath足够，<base>是冗余且危险的
最可靠的排查方式永远是打开 Network 面板，看失败请求的实际 URL —— 它不会说谎，也不会静默忽略你写错的 href 值。
