<base>标签误用大概率直接白屏或路由错乱，因其静默改变所有相对URL解析基准，导致fetch/import等运行时请求错位、资源404；它与Vue Router/React Router的base配置完全隔离，必须严格一致（含结尾斜杠），否则引发白屏、跳转失效；Vite/Webpack构建时混用会生成双斜杠路径致404。
<base> 标签一旦误用，不是“可能白屏”，而是大概率直接白屏或路由错乱——它不报错、不警告，只静默改变所有相对 URL 的解析基准，连 fetch()、import()、new Worker() 都跟着偏移，且无法被 JS 拦截或修正。
为什么 <base href="/admin/"> 会让 fetch("./api/user") 404
浏览器对运行时构造的相对 URL（如 fetch()、XMLHttpRequest.open()、Image.src、CSS 中的 url(avatar.jpg)）**全部以 document.baseURI 为基准解析**，而不是当前脚本位置。
设了 <base href="/admin/"> 后：
-
fetch("./api/user")→ 解析为https://example.com/admin/api/user（而非你预期的根路径） -
import("./utils.js")→ 加载/admin/utils.js，但构建产物实际在/js/utils.js -
background: url(logo.png)→ 请求/admin/logo.png，404
该行为在 Chrome/Firefox/Safari 中完全一致，且服务端重定向或 CORS 配置无法绕过。
立即学习“前端免费学习笔记（深入）”；
<base> 和 Vue Router / React Router 的 base 配置必须完全隔离
前端路由库（如 Vue Router 的 createRouter({ base: '/admin/' }) 或 React Router 的 <Router basename="/admin">）**完全不读取 <base> 标签**，它们的 base 是独立控制导航逻辑的开关。
常见错误组合：
- HTML 里写了
<base href="/admin/">，但 Vue Router 没配base→ 资源加载走/admin/js/app.js，而<router-link to="/dashboard">却跳到https://example.com/dashboard，页面白屏 - Vue Router 配了
base: '/admin'（无结尾斜杠），但<base href="/admin/">有斜杠 → 路由匹配失败，useRoute()返回空，组件不渲染 - SSR 场景下，服务端没同步注入
<base>，客户端 hydration 时资源路径和 DOM 结构不一致，直接中断
Vite/Webpack 构建时混用 <base> 必出双斜杠 404
构建工具的 build.base（Vite）或 publicPath（Webpack）会在打包时重写所有静态资源路径：比如 src/index.js → 输出为 /admin/js/index.js。
此时若 HTML 还手动加了 <base href="/admin/">，浏览器会二次解析：
- 原始引用：
<script src="js/index.js"></script> - 构建后变成：
<script src="/admin/js/index.js"></script> - 再经
<base href="/admin/">解析 → 实际请求：/admin//admin/js/index.js
Network 面板中清晰可见双斜杠路径 + 404。这不是缓存问题，是路径拼接逻辑硬伤。
如何快速确认是否是 <base> 导致白屏
别猜，直接验证：
- 打开 Elements 面板，搜索
<base—— 如果存在，先注释掉整行，刷新看是否恢复 - 在 Console 执行
document.baseURI，确认输出是否符合你部署路径；如果不是，说明<base>被插件注入或 CDN 改写 - 检查 Network 面板中关键 JS/CSS 请求的完整 URL，对比它是否多出了不该有的前缀（如
/subapp/js/app.js而非/js/app.js） - 本地起 HTTP 服务（如
npx serve -s）再测试 ——file://协议下<base>行为更不可靠，容易掩盖真实问题
真正棘手的是微前端场景：<base> 一旦被主应用设置，子应用的 import()、fetch()、甚至 postMessage 目标 origin 都可能错位，且错误分散在多个上下文中，很难归因。这时候宁可不用 <base>，改用显式路径或环境变量拼接。
