微前端架构的核心思想是将一个大型前端应用拆分成多个独立自治的小型应用，每个子应用可以使用不同的技术栈开发，最终由主应用统一集成运行，这种模式非常适合业务复杂、团队规模较大的前端项目。构建微前端架构下的JavaScript应用需要明确主应用和子应用的职责，选择合适的微前端框架，再逐步完成各部分的开发配置。
技术选型建议
目前主流的微前端实现方案有两种，开发者可以根据项目需求选择：
- qiankun：基于single-spa封装的成熟方案，对Vue、React、原生JavaScript等框架兼容性好，提供了完善的样式隔离、沙箱机制，接入成本低，适合大多数传统前端项目改造。
- Webpack模块联邦：Webpack5内置的原生微前端能力，不需要额外引入第三方框架，通过模块共享实现应用间依赖复用，适合全新搭建的、基于Webpack构建的项目。
基于qiankun构建微前端应用
1. 主应用搭建
主应用负责注册子应用、控制子应用的挂载和卸载，这里以原生JavaScript主应用为例。
首先安装qiankun依赖：
npm install qiankun --save
然后在主应用入口文件中注册子应用：
import { registerMicroApps, start } from 'qiankun';
// 注册子应用列表
registerMicroApps([
{
name: 'vue_sub_app', // 子应用名称，需要和子应用导出的名称一致
entry: '//localhost:8081', // 子应用运行地址
container: '#subapp_container', // 子应用挂载的DOM容器
activeRule: '/vue-app', // 当路由匹配该规则时挂载子应用
},
{
name: 'react_sub_app',
entry: '//localhost:8082',
container: '#subapp_container',
activeRule: '/react-app',
}
]);
// 启动qiankun
start();
主应用还需要提供一个子应用挂载的容器节点：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微前端主应用</title>
</head>
<body>
<div id="app">
<nav>
<a href="/vue-app">Vue子应用</a>
<a href="/react-app">React子应用</a>
</nav>
<div id="subapp_container"></div>
</div>
<script src="./main.js"></script>
</body>
</html>
2. 子应用改造
子应用需要暴露出bootstrap、mount、unmount三个生命周期钩子，让qiankun可以管理子应用的加载和卸载，这里以Vue子应用为例。
首先在子应用入口文件添加生命周期导出：
import Vue from 'vue';
import App from './App.vue';
import router from './router';
let instance = null;
// 子应用单独运行时也可以正常启动
function render(props = {}) {
const { container } = props;
instance = new Vue({
router,
render: h => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}
// 暴露qiankun需要的生命周期
export async function bootstrap() {
console.log('vue子应用启动');
}
export async function mount(props) {
console.log('vue子应用挂载', props);
render(props);
}
export async function unmount() {
console.log('vue子应用卸载');
instance.$destroy();
instance = null;
}
// 独立运行时直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
还需要修改子应用的webpack配置，设置跨域和运行端口：
const path = require('path');
module.exports = {
devServer: {
port: 8081, // 子应用运行端口，和主应用注册的entry对应
headers: {
'Access-Control-Allow-Origin': '*', // 允许主应用跨域加载子应用资源
},
},
configureWebpack: {
output: {
library: 'vue_sub_app', // 和主应用注册的子应用名称一致
libraryTarget: 'umd', // 输出umd格式，让qiankun可以正确加载
},
},
};
微前端应用通信
主应用和子应用、子应用之间可以通过qiankun提供的initGlobalState实现状态共享：
// 主应用中初始化全局状态
import { initGlobalState } from 'qiankun';
const actions = initGlobalState({
userToken: '',
userInfo: null,
});
// 监听全局状态变化
actions.onGlobalStateChange((state, prevState) => {
console.log('主应用检测到状态变化', state, prevState);
});
// 修改全局状态
actions.setGlobalState({
userToken: 'test_token_123',
});
// 子应用中获取和修改全局状态
export async function mount(props) {
// props中包含主应用传递的actions
props.onGlobalStateChange((state) => {
console.log('子应用接收到全局状态', state);
});
props.setGlobalState({
userInfo: { name: '测试用户' },
});
}
常见问题解决
- 样式隔离：qiankun默认开启严格的样式隔离，通过动态样式表实现子应用样式不互相影响，也可以在start方法中配置
sandbox: { strictStyleIsolation: true }开启更严格的沙箱模式。 - 依赖复用：如果多个子应用都使用了相同的依赖，可以在主应用中配置
excludeAssetFilter避免重复加载，减少资源体积。 - 路由兼容：子应用的路由需要基于主应用的activeRule做前缀处理，避免路由冲突，比如子应用的所有路由都添加
/vue-app前缀。
基于Webpack模块联邦的构建方式
如果使用Webpack5构建项目，也可以通过模块联邦实现微前端，不需要引入qiankun。主应用配置如下：
// 主应用webpack配置
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'main_app',
remotes: {
vue_sub_app: 'vue_sub_app@http://localhost:8081/remoteEntry.js',
},
}),
],
};
子应用配置：
// 子应用webpack配置
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'vue_sub_app',
filename: 'remoteEntry.js',
exposes: {
'./App': './src/App.vue', // 暴露子应用模块
},
shared: ['vue', 'vue-router'], // 共享依赖
}),
],
};
主应用中就可以直接加载子应用暴露的模块：
import('vue_sub_app/App').then(module => {
const SubApp = module.default;
// 渲染子应用组件
});
微前端JavaScript应用qiankun模块联邦前端架构修改时间：2026-06-21 01:57:43