微前端架构在大型项目中的落地经验（新手友好版）
开篇：什么是微前端？它能做什么？
在传统的大型前端项目中，随着功能越来越多、团队越来越大，代码维护变得越来越难，开发效率下降。这时候，“微前端架构”就应运而生了。
你可以把它理解成“把一个大网站拆分成多个小网站”，每个小网站可以由不同的团队来维护，使用的技术也可以不一样，最后它们又能合在一起运行，就像一个完整的网站一样。
举个例子：
- 网站整体结构：
- 首页（主应用）
- 用户中心（子应用 A）
- 订单系统（子应用 B）
- 客服中心（子应用 C）
这些子系统可以是 Vue、React、Angular 或原生 HTML 各自开发的，但在用户眼中，它们是一个完整的大网站。
🎯 核心目标：提升开发效率、模块化管理、技术栈灵活。
环境准备：打造你的第一个微前端开发环境
⚠️ 新手建议先掌握基本的 HTML/CSS/JS，以及至少一种主流框架如 Vue 或 React。
我们这次将使用 qiankun ——蚂蚁金服开源的一个成熟的微前端解决方案。
第一步：安装 Node.js 和 npm
- 前往 nodejs.org 下载 LTS 版本
- 安装完成后，在命令行执行以下命令验证：
node -v # 应该显示 v16.x.x 或类似版本号
npm -v # 应该显示 8.x.x 或更高
第二步：创建主应用和子应用目录结构
micro-frontend/
├── main-app/ # 主应用
└── sub-apps/
└── vue-subapp/ # 一个基于 Vue 的子应用
你可以手动创建这些文件夹，或者使用命令快速生成：
mkdir -p micro-frontend/main-app micro-frontend/sub-apps/vue-subapp
接下来我们将逐一配置这两个部分。
核心概念：通俗易懂地讲解微前端的关键名词
为了让你更好地理解整个流程，我们先学习几个关键术语：
| 概念 | 解释 |
|---|---|
| 主应用 (Main App) | 负责承载所有子应用的“壳”，通常负责导航栏、权限管理等公共逻辑 |
| 子应用 (Sub App) | 具体功能模块，比如用户中心、订单页，可以是任意技术栈写的页面 |
| 容器应用 | 有时也叫作“壳应用”，即主应用的另一种称呼 |
| 注册子应用 | 把子应用的信息告诉主应用，比如名字、地址、加载方式等 |
| 生命周期钩子 | 子应用必须实现的几个函数，控制什么时候挂载、卸载 |
| 沙箱机制 | 确保不同子应用之间不会互相干扰的一种隔离机制 |
📌 一句话总结：
主应用负责整合和调度，子应用各自为战但又彼此协作。
实战项目：从零开始搭建一个微前端项目
我们将分四步完成：
- 创建主应用
- 创建子应用（Vue）
- 主应用注册并加载子应用
- 测试运行看看效果
步骤一：创建主应用
我们使用 Vite + qiankun 来搭建主应用。
1. 初始化 Vite 项目
cd micro-frontend/main-app
npm create vite@latest . --template vanilla-ts
选择默认选项即可。
2. 安装依赖
npm install
3. 安装 qiankun
npm install qiankun
4. 编写主应用入口（src/main.ts）
import './index.css';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
// 引入 qiankun 及相关方法
import { registerMicroApps, start } from 'qiankun';
const app = createApp(App);
app.use(router).mount('#main-app');
// 注册子应用
registerMicroApps([
{
name: 'vue-subapp',
entry: '//localhost:7101', // 子应用启动后访问的 URL
container: '#subapp-container',
activeRule: '/subapp',
},
]);
// 启动 qiankun
start({
prefetch: 'all',
sandbox: { experimentalStyleIsolation: true }, // 开启实验性样式隔离
});
5. 在 HTML 中添加子应用的容器
打开 index.html：
<div id="main-app"></div>
<!-- 这里用来放置子应用 -->
<div id="subapp-container"></div>
步骤二：创建 Vue 子应用
我们用 Vue CLI 创建一个简单的子应用。
1. 初始化 Vue 子应用
cd ../sub-apps/vue-subapp
npm init vue@latest .
选择默认选项即可。
2. 安装依赖
npm install
3. 修改 Vue 的打包配置以适配 qiankun
创建或修改 vite.config.ts：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
port: 7101,
},
build: {
target: 'es2015',
outDir: '../dist/vue-subapp',
rollupOptions: {
output: {
inlineDynamicImports: true, // 所有内容打包进一个文件
},
},
},
});
4. 设置子应用的生命周期钩子
在 main.ts 中添加如下代码：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
let app: any;
function render() {
app = createApp(App);
app.use(router).mount('#app');
}
// 如果是在 window 上下文中直接打开，则单独运行
if (!window.__POWERED_BY_QIANKUN__) {
render();
} else {
// 微前端环境下暴露生命周期钩子
(window as any).renderVueSubApp = render;
}
步骤三：注册并加载子应用
我们已经完成了两个应用的基本骨架，现在开始测试。
1. 启动主应用
cd ../../main-app
npm run dev
此时你应该看到主应用在 http://localhost:5173
2. 启动子应用
cd ../sub-apps/vue-subapp
npm run dev
现在子应用应该在 http://localhost:7101
3. 打开浏览器访问主应用
在某个路由下添加路径 /subapp，例如点击导航到 /subapp 页面，你会发现我们的 Vue 子应用被嵌套加载出来了！
🎉 成功啦！
步骤四：让子应用更真实一些（添加样式和跳转）
编辑子应用的 App.vue：
<template>
<div style="padding: 20px; background: lightblue;">
<h1>我是 Vue 子应用</h1>
<p>这是来自子应用的内容！</p>
<a href="/subapp">刷新试试看</a>
</div>
</template>
常见问题：新手容易踩的坑与解答
❓Q：为什么子应用加载出来一片空白？
✅ A：可能原因：
- 主应用未正确注册子应用（检查 entry 和 activeRule）
- 子应用没有导出正确的生命周期方法
- 子应用的端口号没有正常开放（检查是否冲突）
❓Q：子应用样式影响了主应用怎么办？
✅ A：开启 qiankun 沙箱模式：
start({ sandbox: { experimentalStyleIsolation: true } });
这个设置会让子应用的样式只作用于自己，不污染主应用。
❓Q：子应用怎么共享登录状态？
✅ A：可以通过全局变量、localStorage 或统一鉴权服务传递 token。
❓Q：能不能用 React 写子应用？
✅ A：当然可以！qiankun 支持 Vue、React、Angular，甚至原生 JS。
学习建议：下一步可以学什么？
恭喜你完成了第一个微前端项目的搭建！接下来建议你继续拓展：
✅ 推荐学习路径：
- 【进阶】尝试使用 React 构建另一个子应用，体验多技术栈集成
- 【实践】研究如何实现子应用之间的通信（shared-state、props 等）
- 【优化】了解动态加载策略、按需加载机制
- 【部署】学习如何部署多个子应用，并解决跨域问题
- 【原理】深入阅读 qiankun 源码，了解沙箱机制、生命周期设计
结语：从零到微前端，你已经迈出第一步！
虽然微前端听起来很高大上，但其实它就是帮你更好地组织代码、协调团队协作的一种工具。只要掌握了基础，后续的学习会非常顺滑。
希望这篇教程能帮助你顺利入门微前端，祝你在前端学习的路上越走越远！
📌 延伸资源推荐：
- qiankun 官方文档
- Vite 官方指南
- 微前端实战课程（B站）
- 前端面试宝典（含微前端章节）
欢迎关注我，我会持续输出更多前端干货内容～
评论 0