base href 必须与子应用 publicpath 严格对齐，否则资源路径被拼两次导致404；例如两者均设为/subapp/时，src="js/app.js"会变成/subapp//subapp/js/app.js；应优先由构建工具控制publicpath，主应用避免手动写base，或确保base为绝对url且不与publicpath重复。
base href 必须和微前端子应用的 publicPath 严格对齐
微前端架构中，子应用常通过 Webpack 的 publicPath 配置资源前缀，而主应用 HTML 中的 <base href> 又会重写所有相对路径的解析起点——两者若值相同且未协调，资源 URL 就会被拼两次。比如子应用设 publicPath: '/subapp/'，HTML 又写了 <base href="/subapp/">，一个 src="js/app.js" 最终可能变成 /subapp//subapp/js/app.js（注意双斜杠），404 不可避免。
实操建议：
- 优先由构建工具统一控制：Webpack 子应用设
publicPath: 'auto'或明确值，主应用 HTML **不手动写**<base>，改用运行时动态设置__webpack_public_path__ - 若必须用
<base>，确保其href值与子应用实际部署路径一致，且不能和publicPath重复；例如子应用部署在https://cdn.example.com/subapp/，则<base href="https://cdn.example.com/subapp/">是安全的，但<base href="/subapp/">在跨域或非根域名下会失效 - 检查子应用 JS chunk 加载路径：打开 DevTools Network 面板，过滤
js/，看请求 URL 是否多了一层前缀；若出现/subapp/subapp/js/app.abc123.js，基本就是拼接重复了
base 标签不影响子应用 JS 内部的 fetch 和 import 路径
很多团队误以为加了 <base href="/micro/"> 后，子应用里写的 fetch('./api/data') 或 import('./utils') 也会自动带上 /micro/ 前缀——其实完全不会。<base> 只在 HTML 解析阶段起作用，只改 <script src></script>、<link href>、CSS url() 这类静态属性里的纯相对路径（即不以 /、: 或协议开头的字符串）。
这意味着：
-
fetch('./api/user')仍按当前页面 URL 解析，即https://main.example.com/micro/api/user，不是https://main.example.com/micro/micro/api/user - 子应用若用
import('./routes')动态加载模块，路径解析也完全绕过<base>，依赖的是模块打包器（如 Webpack）生成的__webpack_require__.e逻辑 - 真正受影响的只有硬编码在 HTML 模板里的路径，比如子应用挂载容器的
<div id="subapp-root"></div>旁顺手写的<img src="icon.png">
主应用中 base target="_blank" 会意外劫持子应用内所有链接
<base target="_blank"> 看似方便，但在微前端场景下极其危险。它会让主应用中所有未显式声明 target 的 <a></a>、<form></form>、甚至子应用渲染出的链接（只要没写 target）全部在新窗口打开——包括子应用内部的导航菜单、表单提交、iframe 加载等。
更麻烦的是：target="_blank" 若不配 rel="noopener"，新开页可通过 window.opener 访问主应用上下文，存在权限泄露风险。而子应用通常无法控制主应用的 <base> 属性。
规避方式：
- 主应用中禁用
target属性，改用显式声明：所有需要新窗口的链接都写<a href="..." target="_blank" rel="noopener"></a> - 子应用在初始化时主动重置
document.baseURI影响范围：虽然不能改<base>行为，但可通过拦截click事件 +event.preventDefault()+window.open()自行控制跳转逻辑 - CI/CD 流水线中加入 HTML Lint 规则，禁止
<base target>出现在主应用模板中
本地开发时 base href 用 http://localhost:3000/ 比 / 更安全
微前端项目本地联调时，主应用和多个子应用常分属不同端口（如主应用 http://localhost:3000/，子应用 A http://localhost:8080/）。此时若 HTML 写 <base href="/subapp/">，所有相对路径都会被解析为 http://localhost:3000/subapp/xxx，而非子应用自己的地址，导致资源加载失败或跨域错误。
正确做法是：
- 开发环境用完整绝对 URL：
<base href="http://localhost:3000/subapp/">，确保路径指向主应用服务的代理出口 - 生产环境切回 CDN 绝对路径：
<base href="https://cdn.example.com/subapp/">，避免因部署路径变更引发问题 - 严禁使用环境变量占位符（如
<base href="%PUBLIC_URL%/">）直接发给浏览器——构建时若未替换，浏览器会把字面量当真实 URL，静默忽略整条<base>
最易被忽略的一点：微前端场景下，<base> 的影响范围是整个 HTML 文档，不区分主子应用边界；一旦写错，问题会同时波及所有子应用的静态资源加载，但错误现象却分散在各个子应用的日志里，排查成本极高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
