微前端 vue实现
微前端架构概述
微前端是一种将多个独立前端应用组合成一个整体的架构模式，适用于大型项目或团队协作。Vue 作为主流框架之一，可通过多种方式实现微前端方案。
基于 Single-SPA 的实现
Single-SPA 是一个微前端框架，支持 Vue、React 等多种技术栈的集成。
安装依赖
npm install single-spa single-spa-vue配置主应用（基座）
在主应用中注册子应用：
// main.js
import { registerApplication, start } from 'single-spa';
registerApplication({
name: 'vue-app',
app: () => System.import('@org/vue-app'), // 子应用入口
activeWhen: '/vue',
});
start();配置子应用
子应用需导出生命周期钩子：
// main.js (子应用)
import singleSpaVue from 'single-spa-vue';
import Vue from 'vue';
import App from './App.vue';
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render: (h) => h(App),
el: '#vue-app', // 与主应用容器ID匹配
},
});
export const { bootstrap, mount, unmount } = vueLifecycles;基于 Module Federation 的实现
Webpack 5 的 Module Federation 支持模块共享，适合微前端场景。
主应用配置
// webpack.config.js (主应用)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
plugins: [
new ModuleFederationPlugin({
remotes: {
vueApp: 'vueApp@http://localhost:3001/remoteEntry.js',
},
}),
],
};子应用配置
// webpack.config.js (子应用)
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'vueApp',
filename: 'remoteEntry.js',
exposes: {
'./App': './src/main.js',
},
}),
],
};动态加载子应用
在主应用中使用动态导入：
const { mount } = await import('vueApp/App');
mount('#vue-app');基于 Qiankun 的实现
Qiankun 是基于 Single-SPA 的封装，提供更简单的 API。
主应用配置
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'vue-app',
entry: '//localhost:8080',
container: '#vue-container',
activeRule: '/vue',
},
]);
start();子应用配置
子应用需导出生命周期钩子：
// main.js (子应用)
export async function bootstrap() {}
export async function mount(props) {
new Vue({ render: h => h(App) }).$mount(props.container);
}
export async function unmount() {}样式与通信方案
样式隔离
- 使用 Shadow DOM 或 CSS Modules 避免冲突。
- Qiankun 默认支持沙箱隔离。
通信方式
- CustomEvent：通过全局事件通信。
- Redux/Mobx：共享状态管理库。
- Props：主应用通过
props传递数据给子应用。
部署注意事项
- 子应用需支持跨域访问。
- 主应用和子应用的路由需避免冲突（如使用不同基路径）。
- 静态资源路径需使用绝对路径或 CDN 地址。
以上方案可根据项目需求选择，Single-SPA 和 Qiankun 适合渐进式集成，Module Federation 更适合 Webpack 5 技术栈。
