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

北城以北

2025-06-27 02:25

阅读 598

开篇：什么是微前端？为什么我们要用它？

在现代 Web 开发中，随着应用的体量越来越大、功能越来越多，单体式的前端项目逐渐暴露出很多问题：

团队协作困难
代码难以维护
新技术升级风险大
部署效率低

微前端（Micro Frontends）就是为了解决这些问题而诞生的一种前端架构思想。它的核心理念是将一个巨大的前端应用拆分成多个独立的小型前端应用，每个小应用可以独立开发、测试、部署，并最终整合成一个完整的大系统。

你可以把它想象成拼图：每一块拼图是一个小团队负责的功能模块，最后所有拼图合在一起就是一个完整的画面。

微前端的优点：

团队分离：不同团队可以并行开发不同的子应用。
技术栈自由：每个子应用可以用不同的框架（如 Vue、React、Angular 等）实现。
易于维护和升级：修改一个小模块不影响整体。
灵活部署：各子应用可独立上线、更新。

环境准备：从零开始搭建你的微前端环境

为了演示微前端的工作方式，我们将使用 qiankun 这个开源库，它是阿里巴巴推出的微前端解决方案，对初学者非常友好。

步骤一：安装 Node.js 和 npm

确保你已经安装了 Node.js 和 npm（Node 包管理器）。可以通过命令检查：

node -v
npm -v

如果没有安装，请访问 https://nodejs.org 下载安装最新稳定版本。

步骤二：创建主项目（基座应用）

我们先创建一个主项目，用来“承载”其他微前端子应用。

mkdir microfront-main
cd microfront-main
npm init -y
npm install qiankun --save

然后安装一个轻量级构建工具——webpack：

npm install webpack webpack-cli html-webpack-plugin --save-dev

创建目录结构如下：

microfront-main/
├── src/
│   └── index.js
├── public/
│   └── index.html
└── webpack.config.js

编写 `public/index.html`：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>微前端主应用</title>
</head>
<body>
  <div id="root"></div>
  <div id="subapp-container"></div>
</body>
</html>

编写 `src/index.js`：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vueApp', // 子应用名称
    entry: '//localhost:7101', // 子应用地址
    container: '#subapp-container', // 容器节点
    activeRule: '/vue', // 激活路径
  },
]);

start(); // 启动微前端

编写 `webpack.config.js`：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

启动主应用服务器：

npx webpack serve

主应用现在运行在 http://localhost:8080

步骤三：创建第一个子应用（Vue 应用）

创建一个子应用，作为我们第一个微前端模块。

mkdir microfront-vue
cd microfront-vue
npm create vue@latest .
npm install

接着我们要改造这个 Vue 项目，让它可以被主应用加载。

修改 src/main.js：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

let app = null;

function render() {
  app = createApp(App);
  app.mount('#subapp-container');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('Vue子应用 初始化');
}

export async function mount(props) {
  console.log('Vue子应用 被挂载');
  render();
}

export async function unmount() {
  console.log('Vue子应用 被卸载');
  app.unmount();
}

运行子应用：

npm run dev

子应用现在运行在 http://localhost:5173。但我们希望它运行在一个静态服务端口，比如 7101。我们稍后会改一下打包配置。

核心概念讲解：微前端是如何工作的？

1. 主应用 vs 子应用

主应用（也叫基座应用）：相当于一个容器，负责加载和控制各个子应用何时显示。
子应用：独立开发的小型应用，可以是 Vue、React 或普通的 HTML 页面。

2. 生命周期钩子函数

为了让主应用能正确地控制子应用，我们需要为子应用定义三个生命周期函数：

函数名	用途说明
`bootstrap`	初始化时调用一次
`mount`	当子应用需要显示时调用
`unmount`	当子应用不再需要时销毁

这是微前端中“插拔”的关键机制。

3. 激活规则（activeRule）

主应用通过 URL 来决定是否要展示某个子应用。例如 /vue 就表示当用户访问该路径时，就加载我们的 Vue 子应用。

4. 容器节点（container）

你需要为子应用指定一个 DOM 容器，通常是一个 <div> 元素，用于渲染子应用的界面内容。

实战项目：搭建一个包含两个子应用的微前端项目

移动端适配方案-1

实战项目：搭建一个包含两个子应用的微前端项目

我们现在来把上面做的子应用部署为真正的微前端模块。

第一步：子应用打包成静态资源

为了让主应用能够远程加载子应用，我们需要将其打包为静态资源。

修改 Vue 项目的 vite.config.js：

export default defineConfig({
  build: {
    target: 'es2015',
    outDir: '../main-app/public/apps/vue', // 输出到主项目的apps目录
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
      },
      output: {
        inlineDynamicImports: true
      }
    }
  },
});

打包命令：

npm run build

打包后的文件会放在主项目的 public/apps/vue 目录下。

第二步：主应用加载打包后的子应用

现在我们需要让主应用从本地路径加载子应用，而不是从 localhost:5173。

修改主应用的注册部分：

registerMicroApps([
  {
    name: 'vueApp',
    entry: '/apps/vue', // 指向打包后的目录
    container: '#subapp-container',
    activeRule: '/vue',
  }
]);

现在访问 http://localhost:8080/vue，你应该能看到子应用被成功加载！

第三步：添加第二个子应用（React 应用）

我们再加一个 React 的子应用试试看。

创建 React 项目：

mkdir microfront-react
cd microfront-react
npm create react-app . --template typescript

同样地，修改 src/index.tsx：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

let root = null;

function render() {
  root = ReactDOM.createRoot(document.getElementById('subapp-container'));
  root.render(<App />);
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('React子应用 初始化');
}

export async function mount(props) {
  console.log('React子应用 挂载');
  render();
}

export async function unmount() {
  console.log('React子应用 卸载');
  root.unmount();
}

然后修改 package.json 添加打包配置：

"homepage": ".",

打包：

npm run build

把 React 打包后的 build 文件夹复制到主项目下的 public/apps/react。

最后在主应用中注册 React 子应用：

registerMicroApps([
  {
    name: 'vueApp',
    entry: '/apps/vue',
    container: '#subapp-container',
    activeRule: '/vue',
  },
  {
    name: 'reactApp',
    entry: '/apps/react',
    container: '#subapp-container',
    activeRule: '/react',
  }
]);

现在访问：

http://localhost:8080/vue → Vue 子应用
http://localhost:8080/react → React 子应用

🎉 成功实现了两个子应用的动态加载！

常见问题解答（FAQ）

Q1：子应用加载不出来，页面空白怎么办？

✅ 检查子应用是否已正确打包到主项目的 public/apps/xxx 目录。
✅ 检查容器节点是否存在，如 <div id="subapp-container"></div>
✅ 查看浏览器控制台是否有报错信息。

Q2：子应用之间样式互相影响怎么办？

✅ 使用 CSS Modules 或 Shadow DOM 技术隔离样式。
✅ 在子应用入口加上命名空间避免冲突。

Q3：子应用使用不同的框架，会出问题吗？

✅ 不会，qiankun 支持多种框架共存。
✅ 只需按照规范暴露生命周期函数即可。

Q4：如何调试微前端子应用？

✅ 在主应用中开启 qiankun 的日志模式：

start({ 
  prefetch: 'all', 
  jsSandbox: true,
  singular: false,
  debug: true
});

Q5：生产环境下怎么部署子应用？

✅ 每个子应用单独部署成静态资源网站（如使用 Nginx）
✅ 主应用只需修改 entry 为线上地址即可

学习建议：下一步怎么深入学习微前端？

恭喜你完成了第一个微前端项目！接下来你可以从以下几个方向继续提升：

✅ 深入学习的方向：

高级特性：
- 路由同步
- 公共资源共享
- 子应用间通信（EventBus / props传参）
性能优化：
- 动态加载子应用（按需加载）
- 子应用缓存机制
多团队协作流程设计：
- 如何划分子应用边界？
- 如何保证接口一致性？
探索其他微前端方案：
- Single SPA
- Module Federation（Webpack 5）

✅ 推荐学习资源：

qiankun 官网文档：https://qiankun.umijs.org
GitHub 示例项目：搜索 “qiankun demo”
B站、YouTube 视频教程：“qiankun 微前端实战”

结语

微前端不是一个难懂的技术，而是现代前端工程化的一个必然趋势。它帮助我们把复杂的项目变小，把大团队变成高效协作的小团队。

本文通过最简单的方式带你实践了一个完整的微前端项目。希望你能动手跟着操作一遍，边做边理解每一个知识点。

记住一句话：“学编程最好的方法，就是动手写一个属于自己的项目。”

如果你喜欢这种风格的教学，欢迎留言反馈，我会为你写出更多通俗易懂的前端干货文章 👨‍🏫✨

标签:开发心得区块链

最热最新

暂无评论

为你推荐

暂无相关推荐

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

开篇：什么是微前端？为什么我们要用它？

微前端的优点：

环境准备：从零开始搭建你的微前端环境

步骤一：安装 Node.js 和 npm

步骤二：创建主项目（基座应用）

编写 `public/index.html`：

编写 `src/index.js`：

编写 `webpack.config.js`：

步骤三：创建第一个子应用（Vue 应用）

核心概念讲解：微前端是如何工作的？

1. 主应用 vs 子应用

2. 生命周期钩子函数

3. 激活规则（activeRule）

4. 容器节点（container）

实战项目：搭建一个包含两个子应用的微前端项目

第一步：子应用打包成静态资源

第二步：主应用加载打包后的子应用

第三步：添加第二个子应用（React 应用）

常见问题解答（FAQ）

Q1：子应用加载不出来，页面空白怎么办？

Q2：子应用之间样式互相影响怎么办？

Q3：子应用使用不同的框架，会出问题吗？

Q4：如何调试微前端子应用？

Q5：生产环境下怎么部署子应用？

学习建议：下一步怎么深入学习微前端？

✅ 深入学习的方向：

✅ 推荐学习资源：

结语

评论 0

为你推荐

精选内容

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

开篇：什么是微前端？为什么我们要用它？

微前端的优点：

环境准备：从零开始搭建你的微前端环境

步骤一：安装 Node.js 和 npm

步骤二：创建主项目（基座应用）

编写 public/index.html：

编写 src/index.js：

编写 webpack.config.js：

步骤三：创建第一个子应用（Vue 应用）

核心概念讲解：微前端是如何工作的？

1. 主应用 vs 子应用

2. 生命周期钩子函数

3. 激活规则（activeRule）

4. 容器节点（container）

实战项目：搭建一个包含两个子应用的微前端项目

第一步：子应用打包成静态资源

第二步：主应用加载打包后的子应用

第三步：添加第二个子应用（React 应用）

常见问题解答（FAQ）

Q1：子应用加载不出来，页面空白怎么办？

Q2：子应用之间样式互相影响怎么办？

Q3：子应用使用不同的框架，会出问题吗？

Q4：如何调试微前端子应用？

Q5：生产环境下怎么部署子应用？

学习建议：下一步怎么深入学习微前端？

✅ 深入学习的方向：

✅ 推荐学习资源：

结语

评论 0

为你推荐

相关推荐

精选内容

编写 `public/index.html`：

编写 `src/index.js`：

编写 `webpack.config.js`：