标签在嵌套路由中非安全加固而是故障放大器，会因强制统一基准 uri 导致 fetch/api 请求错位、资源加载 404、微前端子应用中断；其与 vue router/react router 的 base 配置必须严格隔离且一致，否则引发白屏、路由失效；vite/webpack 构建时若混用 会产生双斜杠 404；微前端及 ssr 场景下更易因基准不一致导致 hydration 失败或 chunk 加载中断。
<base> 标签在嵌套路由场景下不是安全加固手段，而是潜在故障放大器；它不解决路由路径问题，反而会加剧资源加载错位、API 请求失败、微前端子应用加载中断等连锁风险。
为什么 <base href="/subapp/"> 会让 fetch("./api/user") 请求 404
浏览器对 fetch()、import()、new Worker() 等运行时构造的相对 URL，**默认以 document.baseURI 为基准解析**（而非当前 JS 文件位置）。一旦设了 <base href="/subapp/">，fetch("./api/user") 就变成请求 https://example.com/subapp/api/user——而你的后端 API 很可能部署在根路径或独立域名下。
- 该行为在 Chrome/Firefox/Safari 中一致，且无法被 CORS 或服务端重定向绕过
- CSS 中
background: url(avatar.jpg)同样受此影响（但现代浏览器对 CSS 的处理存在兼容差异） -
XMLHttpRequest.open("GET", "data.json")和new Image().src = "icon.png"也走同一套解析逻辑
<base> 和 Vue Router / React Router v6+ 的 base 配置必须严格隔离
前端路由库完全不读取 document.baseURI，它们的 base 参数是独立控制导航行为的开关。若 HTML 写了 <base href="/admin/">，但 Vue Router 没配 createRouter({ base: '/admin/' })，就会出现：资源加载走 /admin/js/app.js，而点击 <router-link to="/dashboard"></router-link> 却跳到 https://example.com/dashboard —— 页面白屏、路由不匹配、history API 失效。
- React Router v6+ 必须用
<router basename="/admin"></router>包裹，否则useNavigate()和Link全部错位 - Vue Router 的
base值必须与<base href>完全一致（包括结尾斜杠），差一个字符都会导致白屏 - SSR 场景下，服务端渲染的 HTML 若没同步注入
<base>，首屏资源路径和客户端 hydration 会不一致
构建工具（Vite/Webpack）和 <base> 混用必然触发双斜杠 404
Vite 的 build.base 或 Webpack 的 publicPath 会在打包时重写所有静态资源路径（如 js/app.js → /admin/js/app.js）。如果此时 HTML 还手动写了 <base href="/admin/">，浏览器二次解析时会把已带前缀的路径再拼一次：/admin//admin/js/app.js —— 中间两个 // 导致服务端 404，且 Network 面板里能看到明确的错误路径。
- Vite 构建后生成的 HTML 已含正确资源路径，不该再手动加
<base> - Webpack + HtmlWebpackPlugin 时，若配置了
publicPath: '/admin/'，HTML 模板中就不要出现<base> - 微前端场景下，子应用若同时依赖主应用的
<base>和自身构建配置，chunk 加载大概率中断
真正容易被忽略的是：本地开发时用 <base href="http://localhost:3000/admin/"> 比用 /admin/ 更安全，能避免和后端代理规则冲突；而生产环境部署到 CDN，直接用 https://cdn.example.com/v2.1/ 这类绝对 URL，比任何相对路径都可控——因为 <base> 的作用范围太窄，又太深，稍有不慎就从“省事”变成“救火”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
