大型vue微前端需模块联邦实现按需加载、共享运行时、无冲突与独立迭代，核心在于配置精准、路径一致、共享逻辑清晰，宿主负责入口与路由，远程应用仅暴露业务模块。
大型 Vue 应用用模块联邦实现微前端，核心不是“拆完就完事”，而是让拆出来的子应用能真正被按需加载、共享运行时、不冲突、可独立迭代。关键不在技术多炫，而在配置稳、路径准、共享逻辑清。
宿主与远程应用的分工要明确
宿主（Shell）负责统一入口、路由调度、基础布局和权限控制；远程应用（如 user-center、product-list）只暴露具体业务模块，不接管全局状态或路由。两者通过 remoteEntry.js 建立连接，不是靠打包合并，而是运行时动态拉取。
- 宿主配置 remotes 时，URL 必须与远程应用 devServer 的 publicPath 完全一致（含协议、端口、末尾斜杠），例如：
user_center@http://localhost:3001/ - 远程应用必须显式 expose 组件或模块，比如
./src/components/UserProfile.vue，不能只写文件路径，得在exposes中声明为./UserProfile - 远程应用构建后，
remoteEntry.js要能被宿主直接 HTTP 访问到——生产环境通常托管在 CDN，publicPath 就得配成 CDN 地址
按需加载必须靠 import() 触发
模块联邦本身不自动加载任何远程代码。所谓“按需”，是你决定什么时候调用 import("remoteApp/UserProfile")，而不是框架替你做主。
- 不要在组件顶层写
import("./UserProfile")，这等于页面一打开就拉，失去按需意义 - 推荐结合路由懒加载：
component: () => import("remoteApp/UserProfile") - 或绑定用户操作：
onClick={() => import("remoteApp/OrderForm").then(render)} - Vite 用户注意：路径前缀必须严格匹配 remotes 配置名，比如
remoteApp/OrderForm不能简写成OrderForm
shared 配置稍错就白屏，得抠细节
Vue、vue-router、pinia 这类基础依赖，必须在宿主和所有远程应用中统一版本并复用实例，否则会出现 Hook 失效、响应式丢失、路由跳转异常等问题。
-
vue和vue-router必须设singleton: true，且eager: true（宿主提前初始化） -
pinia同样 singleton，但 store 实例不能直接放 shared，得封装成工厂函数再 expose 出来 - 第三方库如
lodash建议加requiredVersion: "^4.17.0"，避免子应用用了不兼容小版本 - 自定义工具函数或组合式 API（如
useAuth）不能直接共享，要先打成包、发布、再作为 shared 引入
开发联调和构建部署要闭环验证
本地跑通不等于上线可用。很多问题只在构建后暴露，比如 publicPath 错位、chunk 名冲突、CDN 缓存导致 remoteEntry.js 未更新。
- 开发阶段：用
pnpm workspace管理多项目，统一依赖版本，避免 node_modules 差异 - 构建产物检查：确认远程应用输出目录含
remoteEntry.js，且其内容里__webpack_require__.f.remotes正确注册了暴露模块 - 上线前验证：手动访问
http://xxx/remoteEntry.js，确保返回 JS 内容可执行；再检查浏览器 Network 标签页，确认动态 import 时只发起该 remoteEntry 请求，而非整包下载 - 错误监控：捕获
import()的 Promise reject，提示“子应用加载失败”，而不是静默白屏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
