标签不是省事开关，而是隐性故障放大器；它使fetch等运行时请求、锚点跳转、路由行为全部错位且静默失效，必须与路由配置、构建工具严格对齐，否则引发404或白屏。
<base> 在单页应用（SPA）、微前端、构建部署等场景下不是“省事开关”，而是隐性故障放大器——它不解决路径问题，反而让资源加载、API 请求、锚点跳转、路由行为全部错位，且错误静默发生，调试困难。
base 标签会让 fetch('./api') 请求发到错误路径
浏览器对 fetch()、import()、new Worker() 等运行时构造的相对 URL，默认以 document.baseURI 为基准解析，而非当前 JS 文件位置。一旦设了 <base href="/admin/">，fetch('./api/user') 就会变成请求 https://example.com/admin/api/user，而你的后端 API 很可能在根路径或独立域名下。
- 该行为在 Chrome/Firefox/Safari 中一致，无法被 CORS 或服务端重定向绕过
-
CSS background: url(avatar.jpg)同样受影响（HTML 解析阶段计算） -
XMLHttpRequest.open("GET", "data.json")和new Image().src = "icon.png"也走同一套解析逻辑 - 但
window.location、history.pushState()、JS 字符串拼接的 URL（如el.src = 'data.png'）完全不受影响——它们只是字符串，不参与 URL 解析
base 和前端路由库的 base 配置必须严格隔离且一致
<base href="/subapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们完全不读 document.baseURI，必须显式配置：
- Vue Router：
createRouter({ base: '/subapp/' })，结尾斜杠不能少 - React Router v6+：
<router basename="/subapp"></router>，注意这里不需要结尾斜杠（与 HTML 的<base>规则不同） - 若 HTML 写了
<base href="/subapp/">但路由没配 base，就会出现：资源加载走/subapp/js/app.js，而点击<router-link to="/dashboard"></router-link>却跳到https://example.com/dashboard——页面白屏、路由不匹配 - SSR 场景下，服务端渲染的 HTML 若未同步注入
<base>，首屏资源路径和客户端 hydration 会不一致
构建工具与 base 标签混用必然触发双斜杠 404
Vite 的 build.base 或 Webpack 的 publicPath 会在打包时重写所有静态资源路径（如 js/app.js → /subapp/js/app.js）。如果此时 HTML 还手动写了 <base href="/subapp/">，浏览器二次解析时会把已带前缀的路径再拼一次：/subapp//subapp/js/app.js——中间两个 // 导致服务端 404。
- Network 面板里能看到明确的失败请求，路径中含重复前缀
- Service Worker 预缓存路径也会错位，导致离线失效
- 微前端子应用若同时设了
publicPath和<base>，chunk 加载中断风险极高 - 构建工具生成的 HTML 通常已注入正确路径，手动再加
<base>属于冗余操作
base 标签写法非法时会静默失效，毫无提示
浏览器对 <base href> 的校验极其严格：只要值不是以 http://、https://、// 或 / 开头，整条标签就被静默丢弃——控制台零警告，但后续所有 <img src="logo.png"> 全部回退到当前页面 URL 解析，批量 404。
- 常见无效写法：
href="assets/"、href="../static"、href="subapp/"、href="%PUBLIC_PATH%/"（未被构建工具替换时就是字面量） - 真正有效的只有两种：
href="/subapp/"（根相对路径，结尾必须带/，否则 Firefox 截断）或href="https://cdn.example.com/v3/"（绝对 URL） -
<base>必须放在最前面，早于<meta charset>和<link rel="stylesheet">，否则部分资源仍按原始路径解析 - 本地开发建议用
href="http://localhost:3000/"而非href="/"，避免和后端路由冲突
最危险的是：所有这些错位都发生在不同层面（HTML 解析、JS 运行时、路由导航、构建输出），但表现都是“资源 404”或“页面白屏”，没有统一报错线索。调试时唯一可靠的方式是打开 Network 面板，逐个看失败请求的实际 URL 是什么——而不是猜 base 写对没写对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
