Vue微前端架构将业务模块封装为自治、可独立生命周期管理的组件级应用，支持跨项目加载、隔离运行与按需通信，通过标准接口、轻量集成、组件库协同及标准化规范实现松耦合落地。
Vue.js 构建基于组件的微前端架构，核心不是把组件当“零件”拼凑，而是把每个业务模块封装成一个**自治、可独立生命周期管理的组件级应用**。它既保留 Vue 单文件组件（SFC）的开发体验，又突破传统组件边界——让“组件”能跨项目加载、隔离运行、按需通信。
组件即微应用：从 UI 单元到运行时实体
传统 Vue 组件是静态复用单元；在微前端语境下，“组件化”被升维为“应用化”：
- 每个子模块（如用户管理、订单中心）以标准 Vue 项目形式存在，拥有自己的路由、状态、样式和构建配置
- 对外只暴露统一接口：mount(container)、unmount()、update(props)，主应用通过这些方法控制其挂载/卸载/传参
- 不依赖全局 Vue 实例或共享 store，避免污染主应用上下文
- 支持 scoped CSS + CSS-in-JS 或 Shadow DOM（可选），天然具备样式隔离能力
轻量集成：避开框架绑架，聚焦职责分离
不强求使用 qiankun 或 Module Federation 等重型方案，而是利用 Vue 生态原生能力实现松耦合：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 主应用作为“容器组件”，用 <component :is="currentMicroApp"> 动态切换微应用实例（配合 defineAsyncComponent 实现懒加载）
- 微应用打包为 UMD 或 ESM 模块，通过 script 标签或 import() 加载，无需 Webpack 插件介入
- 通信采用轻量事件总线（EventBus）或自定义 CustomEvent，避免引入 Vuex/Pinia 跨应用依赖
- 共享逻辑抽离为独立 npm 包（如 @company/utils、@company/request），各微应用按需导入，版本由主应用统一约束
可复用组件库与微应用协同演进
组件体系不是被微前端“替代”，而是成为其底层支撑：
立即学习“前端免费学习笔记（深入）”；
- 原子组件（Button、Input）和分子组件（SearchForm、DataTable）沉淀为私有组件库，供所有微应用引用
- 有机体组件（UserDashboard、OrderList）可直接升级为微应用入口，只需补充生命周期钩子和挂载逻辑
- 主应用通过插槽（slot）向微应用注入统一 Header、Sidebar、权限指令等，保持视觉与交互一致性
- 设计系统（Design System）与组件库同步更新，确保各微应用 UI 行为一致，降低协作成本
落地关键：标准化而非复杂化
真正决定成败的不是技术深度，而是团队共识的规范细节：
- 所有微应用必须导出标准的 bootstrap() 方法，返回 { mount, unmount, update }
- 路由由主应用统一分发，微应用内部使用 memoryHistory 或无路由模式，避免 history 冲突
- 环境变量通过 props 注入（如 API_BASE_URL、APP_ID），禁止读取 window.env 或 .env 文件
- 构建产物目录固定为 /dist/micro-app.js，主应用通过约定路径动态加载，降低配置维护成本
