在iframe多层嵌套中基本无效，仅影响当前文档内未显式设target的和的响应加载位置，不触发跳转、不改变iframe自身行为，对js导航、iframe src及资源加载完全无效。
<base> 在嵌套页面（如 iframe 多层嵌套）中基本没用，它不触发跳转、不改变 iframe 自身行为，只影响当前文档内未显式设 target 的 <a></a> 和 <form></form> 的响应加载位置。
base target="_top" 在 iframe 里完全不生效
<base target="_top"> 不是导航指令，它不会让 iframe “主动跳出”。哪怕你嵌了三层 iframe，这个标签也只在点击链接时起作用——而且仅限于那个链接本身被用户点击、且没写 target 属性的情况。对 window.location.href、<iframe src></iframe>、JS 动态创建的链接，它一概不管。
- 必须把
target="_top"显式写在具体<a></a>或<form></form>标签上才可能生效 - 值必须带双引号、全小写：
target="_top"——target=_top或target="_TOP"都会被浏览器忽略 - 外层 iframe 必须声明
sandbox="allow-top-navigation"，否则即使写了也会被静默拦截 - 目标页面不能返回
X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'，否则控制台只报Refused to display 'xxx' in a frame，无其他提示
base href 在嵌套页面中会导致 fetch 和 import() 错位
一旦父页面或子页面用了 <base href="/subapp/">，所有运行时构造的相对 URL（比如 fetch("./api/user")、import("./utils.js")、new Image().src = "icon.png"）都会以 document.baseURI 为基准解析，而不是当前 JS 文件位置。
-
fetch("./api/user")实际发出请求的是https://example.com/subapp/api/user，而非你预期的根 API 路径 - CSS 中的
background: url(avatar.jpg)同样受影响（但各浏览器对 CSS 的处理有细微差异） -
window.location、history.pushState()、内联字符串拼接的 URL（如el.src = "data.png"）不受影响，它们只是普通字符串 - Network 面板里看实际请求地址是最靠谱的调试方式；别猜，直接点开失败请求看 URL 是什么
微前端和 SPA 嵌套中 base href 和路由配置必须严格隔离
<base href> 和 Vue Router / React Router v6+ 的 base 配置是两套完全独立的机制，不读取也不同步。混用或错配会直接导致白屏、资源加载正常但路由跳转失效、hydration 失败等连锁问题。
- Vue Router 必须显式传入
createRouter({ base: '/subapp/' })，否则router.push('/home')会跳到根路径 - React Router v6+ 必须用
<router basename="/subapp"></router>包裹，否则useNavigate()和<link>全部错位 - Webpack/Vite 的
publicPath或build.base若与<base href>值重复，资源路径会被拼两次，出现/subapp//subapp/js/app.js这类双斜杠 404 - 构建工具生成的 HTML 通常已注入正确路径，手动加
<base>属于冗余操作，反而引入冲突风险
真正需要“跳出 iframe”或“统一路径基准”的场景，window.top.location.href = url（需用户操作直接触发）和构建时统一配置 publicPath + 路由 base 参数，比依赖 <base> 更可控、更可预测。它的存在不是为了简化嵌套逻辑，而是极易放大配置偏差——尤其在微前端、SSR、多环境部署时，一个错位的 href 值就能让整页资源批量 404 且控制台零提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
