单体架构适合初始项目、MVP验证、小团队(≤3人)及功能稳定后台系统;模块化是自然延伸,按业务域拆分目录并动态路由;微前端解决多团队协作与独立交付问题,支持技术栈无关和渐进式迁移。

Vue 项目结构不是一成不变的,它会随着业务规模、团队分工和交付节奏自然生长。真正合理的演进,不是为了用新技术而改,而是当单体结构开始拖慢开发、阻碍协作、卡住发布时,才需要向模块化或微前端过渡。
单体结构适合什么阶段
初始项目、MVP 验证、小团队(≤3人)、功能边界清晰且变动少的后台系统,都适合从单体起步。典型结构是:
- 所有源码集中在 src/ 下:components、views、router、store、utils 各司其职
- 路由统一配置在 src/router/index.ts,权限、菜单、页面跳转全由一套逻辑控制
- 状态管理(如 Pinia)按模块拆分 store,但仍在同一实例中运行
- 构建产物只有一个 HTML + JS bundle,部署简单,调试直接
模块化是单体的自然延伸
当项目代码量超 3 万行、页面数超 30 个、多人并行开发频繁冲突时,模块化就是第一步优化。它不改变部署方式,但重构了组织逻辑:
- 按业务域划分目录,比如 src/modules/user/、src/modules/order/,各自包含组件、API、路由、状态
- 提取公共能力为独立包,如 @/composables/auth、@/libs/request,通过 npm link 或 monorepo 管理
- 路由支持动态导入,每个模块导出自己的 route config,主应用聚合注册
- 仍共用同一套构建流程和状态实例,但开发隔离度明显提升
微前端解决的是协作与交付问题
真正触发微前端的,往往是组织级需求:多团队并行、技术栈不统一、子系统生命周期独立、灰度发布需精准控制。此时单体或模块化已无法满足:
立即学习“前端免费学习笔记(深入)”;
- 各子应用可独立开发、测试、构建、部署,比如 home 用 Vue 3 + Vite,report 用 React 18 + Webpack
- 主应用(shell)只负责路由分发、统一登录、基础布局,不感知子应用内部实现
- 通信靠标准化协议:qiankun 的 initGlobalState、自定义事件或消息总线
- 样式隔离、JS 沙箱、资源预加载等机制保障运行时互不干扰
迁移不是推倒重来,而是分层解耦
成功的演进往往采用渐进策略,而非一次性切换:
- 先识别高内聚、低耦合的业务模块(如审批中心、报表平台),作为首批微应用试点
- 保留原有单体主应用作为 shell,用 qiankun 或 wujie 加载子应用,其他页面照常运行
- 逐步将子应用的公共资源(图标、工具函数)沉淀为独立 UI 包,供所有微应用复用
- 最终形成“shell + N 个微应用 + M 个共享包”的稳定结构


















