micro-app 可直接通过 script 标签引入 umd 版本并配合 base 标签使用，但需确保 base 设置正确、子应用注册在 dom 加载后、子应用 html 可直接访问且支持跨域，同时注意沙箱隔离导致的 js 不执行或样式丢失问题。
micro-app 怎么在 HTML 中直接引入使用
micro-app 不需要构建工具也能跑，但必须通过 <script></script> 标签加载核心脚本，且 base 路径和子应用注册时机是关键。直接写 HTML 时最容易漏掉 base 设置或误把子应用注册写在 micro-app 脚本加载前。
- 必须先加载
micro-app的 UMD 版本：<script src="https://unpkg.com/micro-app@1.12.3/umd/micro-app.js"></script> -
<base href="/">建议加在里，否则子应用内相对路径（如./style.css）会 404 - 子应用注册要等 DOM 加载完成，推荐用
DOMContentLoaded或放在底部 - 主应用 HTML 中不能有多个同名
micro-app标签（name 冲突会导致挂载失败）
子应用怎么配置才能被 micro-app 正确加载
micro-app 对子应用的打包输出有硬性要求：必须提供一个可执行的入口 HTML，并且该 HTML 中的资源（JS/CSS）需支持跨域或同源加载。它不解析子应用的构建产物结构，只靠 fetch + iframe/ShadowDOM 渲染 HTML 文档。
- 子应用静态资源建议部署在独立域名或子路径下，避免与主应用路由冲突
- 子应用的
index.html必须能被直接访问（比如https://sub.example.com/index.html），且响应头不含X-Frame-Options: DENY - 子应用内部不要手动调用
history.pushState，应使用micro-app提供的app.router或监听popstate事件 - 如果子应用用了 Vue/React，需关闭其 router 的
scrollBehavior和fallback，防止干扰主应用滚动
为什么 micro-app 挂载后子应用 JS 不执行或样式丢失
这是最常遇到的问题，根本原因在于 micro-app 默认启用沙箱（sandbox），会隔离全局变量和 DOM 操作。但部分老框架（如 jQuery 插件、某些 UI 组件库）依赖 window 上的属性或直接操作 document.head，导致失效。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 开启
sandbox=false可临时绕过（<micro-app name="xxx" url="..." sandbox="false"></micro-app>），但失去样式/JS 隔离，不推荐上线使用 - 更稳妥的做法是在子应用中用
import-html-entry的生命周期钩子，在execScripts后手动补全缺失的全局变量（如window.$ = jQuery） - CSS 丢失常见于子应用用了 CSS-in-JS 或动态插入 style 标签——micro-app 沙箱会拦截
document.write和appendChild到 head，需改用micro-app提供的appendStyle方法 - 检查子应用控制台是否报
Failed to resolve module specifier，说明 ES Module 导入路径错误，需确保子应用构建时配置了正确的publicPath
micro-app 在非 Vue/React 主应用中怎么通信
micro-app 的通信机制不依赖框架，主子应用都通过 micro-app 提供的全局 API 实现，但要注意事件监听必须在子应用 mounted 后注册，否则收不到初始化数据。
- 主应用发消息：
microApp.setData({ name: 'xxx', data: { token: 'abc' } }) - 子应用监听：
microApp.addDataListener((data) => { console.log(data) })，该回调在子应用首次挂载和后续每次setData时触发 - 子应用主动通知主应用：
microApp.dispatch({ type: 'login-success', payload: { uid: 123 } })，主应用用microApp.addGlobalDataListener接收 - 注意：
dispatch是广播机制，所有已注册的子应用都会收到；如需定向通信，建议在payload中加target字段自行过滤
micro-app 的 HTML 集成看似简单，但实际卡点都在路径、沙箱行为和生命周期顺序上。尤其是子应用没做微前端适配时，光靠改主应用 HTML 很难跑通——得确认子应用是否暴露了 mount/unmount 钩子、是否处理了样式污染、是否兼容沙箱环境。这些细节不查控制台 Network 和 Console，很容易以为是 micro-app 本身的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
