基于 qiankun 的企业级微前端脚手架

开箱即用的 qiankun 微前端企业级脚手架，基于 Vue3 + Vite 技术栈。

📖 简介

本项目是一个完整的 qiankun 微前端实践方案，包含：

• 主应用（基座）：负责微应用注册、路由调度、公共依赖管理
• 微应用模板：提供至少2个可运行的微应用示例
• 完整的开发、打包、部署配置

🎯 技术选型

选型	技术方案	理由
微前端框架	qiankun	阿里开源，生态成熟，社区活跃，企业级落地案例丰富
主框架	Vue 3	主流稳定，生态完善，性能优秀
构建工具	Vite	开发启动快，热更新流畅，现代前端工程首选
路由	Vue Router 4	官方标准，配合 qiankun 路由联动成熟
样式隔离	qiankun 沙箱 + CSS Modules	官方方案，简单可靠
跨应用通信	qiankun 全局状态 + 自定义事件	原生支持，无需额外依赖
公共依赖	externals + CDN	减少包体积，享受到缓存优势

📁 项目结构

openClaw/
├── main-app/          # 主应用（基座）
├── micro-app-vue1/    # 微应用1 - Vue3 示例
├── micro-app-vue2/    # 微应用2 - Vue3 示例（业务不同模块）
├── docs/              # 文档
└── README.md

🚀 快速开始

环境要求

• Node.js >= 16
• pnpm 推荐（也可使用 npm/yarn）

安装依赖

# 安装主应用依赖
cd main-app && pnpm install

# 安装微应用1依赖
cd ../micro-app-vue1 && pnpm install

# 安装微应用2依赖
cd ../micro-app-vue2 && pnpm install

本地开发

# 启动主应用（端口 8080）
cd main-app && pnpm dev

# 启动微应用1（端口 8081）
cd micro-app-vue1 && pnpm dev

# 启动微应用2（端口 8082）
cd micro-app-vue2 && pnpm dev

访问 http://localhost:8080 即可看到效果。

📦 生产打包

# 分别打包各个应用
cd main-app && pnpm build
cd ../micro-app-vue1 && pnpm build
cd ../micro-app-vue2 && pnpm build

🚢 部署

• 主应用：部署到根路径
• 微应用：分别部署到对应子路径，或者独立域名
• Nginx 配置参考：见 docs/nginx.conf

✨ 核心特性

• ✅ 微应用自动注册，无需手动配置
• ✅ 路由自动联动，跳转无刷新
• ✅ 公共依赖提取，减小微应用包体积
• ✅ 跨应用通信方案完善
• ✅ 支持本地开发热更新
• ✅ 完善的样式隔离和沙箱机制
• ✅ 生产环境优化配置
• ✅ 清晰的目录结构和开发规范

❌ 常见坑点与解决方案

见文档 踩坑记录

📝 开发规范

1. 微应用保持自身独立可运行
2. 公共依赖尽量在主应用引入，微应用 externals 出去
3. 全局状态通过主应用下发，避免微应用各自维护
4. 路由路径与微应用名称保持一致

📄 License

MIT