vue如何实现微前端
Vue 微前端实现方法
使用模块联邦（Module Federation）
Webpack 5 的模块联邦功能允许独立构建的应用在运行时共享代码。Vue 项目可以通过配置模块联邦实现微前端架构。
配置示例（基于 vue-cli 或 webpack）：
// webpack.config.js (主应用)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
app1: 'app1@http://localhost:3001/remoteEntry.js',
},
shared: ['vue', 'vue-router']
})
]
};子应用配置：
new ModuleFederationPlugin({
name: 'app1',
filename: 'remoteEntry.js',
exposes: {
'./App': './src/App.vue'
},
shared: ['vue', 'vue-router']
});基于 Qiankun 框架
Qiankun 是阿里开源的微前端解决方案，支持 Vue 应用作为主应用或子应用。
主应用安装：
npm install qiankun注册子应用：
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'vue-app',
entry: '//localhost:7100',
container: '#subapp-viewport',
activeRule: '/vue',
}
]);
start();子应用需要导出生命周期钩子：
// main.js
export async function bootstrap() {}
export async function mount(props) {
new Vue({ router, render: h => h(App) }).$mount('#app');
}
export async function unmount() {}使用 Single-SPA
Single-SPA 是一个将多个单页应用聚合为一个整体应用的框架。
安装：
npm install single-spa single-spa-vue主应用配置：
import { registerApplication, start } from 'single-spa';
registerApplication({
name: 'vue-app',
app: () => System.import('vue-app'),
activeWhen: '/vue'
});
start();子应用配置：
import singleSpaVue from 'single-spa-vue';
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render: h => h(App),
router,
el: '#vue-app'
}
});
export const { bootstrap, mount, unmount } = vueLifecycles;iframe 方案
虽然简单但隔离性强的方案，适合快速集成独立应用。
<iframe
src="http://child-app.com"
frameborder="0"
style="width: 100%; height: 100%"
></iframe>技术选型建议
- 需要完整生态系统支持选择 Qiankun
- Webpack 5 项目优先考虑模块联邦
- 需要高度灵活性时使用 Single-SPA
- 快速隔离需求可考虑 iframe
每种方案都需要注意样式隔离、全局变量冲突和路由管理问题，可通过 Shadow DOM、CSS Modules 或命名空间解决。
