微前端架构在大型项目中的落地经验（零基础教程）

---

开篇：什么是微前端？它用来做什么？

如果你是一个刚接触前端开发的新手，或者你已经有一定经验但从未接触过“微前端”这个概念，那这篇文章就是为你准备的。

一、从一个现实问题说起

想象这样一个场景：

你现在在一个大公司上班，负责一个非常大的网站。这个网站功能很多，比如首页、会员中心、商品展示、支付页面……等等。整个项目由多个团队维护，每个团队负责不同的模块。

问题来了：

• 各个团队之间如何协作？
• 如果某个团队想升级自己的技术栈怎么办？
• 如何保证页面整体风格统一，同时又不影响各自独立开发？

这就引出了我们今天的主角 —— 微前端架构。

---

二、那么到底什么是微前端？

我们可以把“微前端”理解为一种将大型前端应用拆分成多个小型子应用的架构方式。

• 每个小应用可以是用不同框架（比如 Vue、React、Angular）写的；
• 它们可以独立开发、部署和测试；
• 最终这些小应用会组合成一个完整的大系统。

是不是很像手机里的“App”模式？每个 App 是独立的小世界，但在一个系统里可以互相通信使用。

---

三、为什么需要微前端？

1. 团队协作更高效：多团队可并行开发不同部分。
2. 技术栈灵活统一共存：你可以继续用 Vue，别的同事用 React，互不干扰。
3. 迭代更新更快：不需要每次都重新打包整个项目。
4. 稳定性提升：一个小模块出错不会影响整个系统。

现在，我们就一步步来了解微前端到底是怎么工作的吧！

---

环境准备：开发环境搭建步骤

工欲善其事，必先利其器。我们开始写代码之前，得先把环境准备好。

一、安装 Node.js 和 npm

Node.js：一个运行 JavaScript 的服务器环境
npm：Node Package Manager，用于下载 JS 工具包

• 前往官网 https://nodejs.org 下载安装
• 安装完成后，在命令行中输入以下命令查看是否成功安装：

node -v
npm -v

出现类似版本号就代表成功了。

---

二、安装主应用容器工具：qiankun（乾坤）

我们使用的开源库是阿里巴巴推出的 qiankun，它可以帮助我们快速实现微前端架构。

安装步骤：

npm install qiankun --save

---

三、创建你的第一个微前端项目结构

我们的项目包括两个子项目：

• 主应用（main-app）：用于管理并显示子应用
• 子应用（app1，app2）：各个独立开发的小模块

项目目录如下：

my-microfrontend/
│
├── main-app/         # 主应用
│   ├── public/
│   └── src/
│       └── index.js
│
├── app1/              # 第一个子应用
│   ├── public/
│   └── src/
│       └── index.js
│
└── package.json

接下来我们将一个个编写它们！

---

核心概念：通俗讲解关键术语

虽然你可能还不熟悉这些专业词汇，但别担心！我们会一步一步地讲清楚每一个概念。

---

一、主应用（Main App）

这是整个系统的入口点。它的作用就像一位“主持人”，负责加载和管理各个子应用。

举个简单的例子：就像微信公众号后台一样，左侧菜单栏跳转到不同子系统，每个子系统就是不同的子应用。

---

二、子应用（Sub Apps）

子应用就是我们真正要开发的内容。例如登录页、订单管理页等。

它们具备以下特点：

• 可以用不同的框架开发
• 可以单独上线、调试
• 在主应用中按需动态加载

---

三、容器（Container）

主应用中的某个区域（通常是 <div id="subapp-container"></div>），用来承载子应用渲染后的内容。

你可以把它理解为“舞台”，而子应用就是在舞台上表演的节目。

---

四、生命周期（Lifecycle）

为了让主应用能控制子应用的加载过程，微前端定义了几个“生命周期钩子”。

简单来说：

• bootstrap()：初始化配置
• mount()：挂载到页面上
• unmount()：卸载退出时执行清理操作

我们会在实战中具体使用这几个方法。

---

实战项目：跟着教程一步步完成一个简单项目

我们现在动手做一个小 DEMO。

目标：创建一个主应用，里面有按钮可以切换显示两个子应用（分别是 Vue 和 React 构建的组件）。

---

一步一做，实操走起 👇

步骤一：创建主应用 main-app

1. 使用 create-react-app 创建一个新项目：

npx create-react-app main-app
cd main-app
npm install qiankun

2. 修改 src/index.js 加载子应用：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { registerMicroApps, start } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:7101',  // 子应用本地服务地址
    container: '#subapp-container',
    activeRule: '/app1',
  },
]);

start(); // 启动微前端

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

3. 在 App.jsx 中添加导航链接：

function App() {
  return (
    <div>
      <h1>主应用</h1>
      <nav>
        <a href="/app1">加载子应用App1</a>
      </nav>
      <div id="subapp-container"></div>  {/* 子应用渲染到这里 */}
    </div>
  );
}

启动主应用：

npm start

访问 http://localhost:3000

---

步骤二：创建 Vue 子应用 app1

使用 Vue CLI 创建 Vue 项目：

vue create app1
cd app1

修改 vue.config.js 文件以适配微前端：

module.exports = {
  devServer: {
    port: 7101,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  configureWebpack: {
    output: {
      libraryTarget: 'umd',
      library: 'app1'
    }
  }
}

再修改 main.js 添加生命周期钩子：

let instance = null;

function render() {
  const app = new Vue({
    render: h => h(App)
  }).$mount('#app');
}

// 微前端生命周期
export async function bootstrap() {}
export async function mount() {
  render();
}
export async function unmount() {
  instance.$destroy();
}

启动子应用：

npm run serve

访问 http://localhost:7101 查看子应用是否正常运行

---

现在尝试打开主应用中的链接 /app1，你能看到子应用被动态加载进来了吗？

🎉恭喜！你已经实现了第一个微前端项目！

---

常见问题：新手容易遇到的问题和解决方案

我们总结了一些初学者常见的问题和解决办法：

---

问题 1：子应用没加载出来，看不到内容怎么办？

✅ 可能原因及解决办法：

• 子应用未正确打包或启动：确保你已经运行 npm run serve 并确认端口无冲突。
• 端口冲突：主应用与子应用使用相同端口会导致问题。
• 控制台报错：“xxx not found in entry”：检查子应用的打包输出名称是否一致。

---

问题 2：子应用样式混乱，和主应用样式冲突了？

✅ 解决方案：

• 使用 scoped 或 CSS Modules 来限制样式作用范围。
• 用 Shadow DOM 技术隔离样式，防止全局污染。
• 推荐给子应用加一层独立命名空间前缀，如 .app1-button

---

问题 3：子应用用的技术栈不一样，比如一个用 Vue 一个用 React，会影响加载吗？

✅ 不会影响！这是微前端的优势之一，支持异构技术栈的混用，只要按照约定的生命周期接口暴露即可。

---

问题 4：子应用怎么和其他子应用通信？

✅ 微前端中推荐使用发布-订阅机制进行跨应用通信。也可以通过全局状态共享的方式（如使用 globalState）。

示例：使用 EventBus 进行简单事件传递。

---

学习建议：下一步的学习路径建议

学习微前端不是一天两天的事，这里给你一条清晰的学习路线：

---

第一阶段：打好基础

• 掌握 HTML、CSS、JavaScript 基础知识
• 熟悉主流框架 Vue、React 的基本语法
• 了解 Webpack 打包原理（重点是 output.libraryTarget）

---

第二阶段：深入微前端核心原理

• 阅读 qiankun GitHub 文档
• 尝试自己实现一个“简化版”的微前端框架（加深对生命周期的理解）
• 掌握 iframe、Shadow DOM、Custom Elements 等底层机制

---

第三阶段：真实项目实践

• 尝试在企业项目中引入微前端架构
• 对接线上部署流程、实现 CI/CD 自动化
• 实现主子应用间的通信、权限统一、UI 共享等功能

---

第四阶段：拓展与优化

• 性能优化技巧：资源懒加载、缓存策略
• 多团队协同开发规范制定
• 微前端 + Serverless 等新技术结合探索

---

结语

本教程带你从零了解了“微前端架构”，亲手搭建了一个最简单的微前端项目，并解答了你在入门过程中最常遇到的问题。

虽然这只是冰山一角，但希望这成为你探索微前端的第一步！

如果你愿意继续深造，欢迎关注更多后续专题文章，一起打造属于你自己的“前端巨轮”🚀

---

点赞+收藏+转发=最好的鼓励👍😊