微前端 vue实现
微前端 Vue 实现方案
微前端架构允许将多个独立的前端应用组合成一个整体。以下是基于 Vue 的微前端实现方案：
方案一：使用 single-spa
安装 single-spa 和相关依赖：
npm install single-spa single-spa-vue在主应用中配置：
import { registerApplication, start } from 'single-spa';
registerApplication(
'vue-app',
() => System.import('vue-app'),
location => location.pathname.startsWith('/vue')
);
start();在子应用中配置：
import singleSpaVue from 'single-spa-vue';
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
el: '#vue-app',
render: h => h(App)
}
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;方案二：使用 qiankun
安装 qiankun：
npm install qiankun在主应用中注册微应用：
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'vue-app',
entry: '//localhost:7100',
container: '#subapp-viewport',
activeRule: '/vue'
}
]);
start();在子应用中导出生命周期钩子：
let instance = null;
function render() {
instance = new Vue({
router,
render: h => h(App)
}).$mount('#app');
}
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {}
export async function mount(props) { render(); }
export async function unmount() { instance.$destroy(); }方案三：模块联邦
使用 Webpack 5 的 Module Federation：
主应用配置：
new ModuleFederationPlugin({
name: 'host',
remotes: {
vueApp: 'vueApp@http://localhost:3001/remoteEntry.js'
}
})子应用配置：
new ModuleFederationPlugin({
name: 'vueApp',
filename: 'remoteEntry.js',
exposes: {
'./App': './src/App.vue'
},
shared: {
vue: { singleton: true }
}
})样式隔离方案
使用 Shadow DOM 实现样式隔离：
const shadow = document.getElementById('app-container').attachShadow({ mode: 'open' });
const vueApp = document.createElement('div');
shadow.appendChild(vueApp);
new Vue({
el: vueApp,
render: h => h(App)
})通信机制
使用自定义事件实现应用间通信：
// 发送消息
window.dispatchEvent(new CustomEvent('micro-frontend-event', {
detail: { message: 'Hello from Vue app' }
}));
// 接收消息
window.addEventListener('micro-frontend-event', (event) => {
console.log(event.detail.message);
});路由解决方案
确保主应用和子应用路由不冲突：
const router = new VueRouter({
mode: 'history',
base: '/vue-app',
routes
});构建优化
为微前端应用配置独立构建：
module.exports = {
output: {
libraryTarget: 'umd',
library: 'vueApp',
jsonpFunction: `webpackJsonp_vueApp`
}
}部署注意事项
- 确保主应用和子应用使用不同的端口
- 子应用资源需配置跨域访问
- 生产环境使用固定版本号引用子应用
- 考虑使用 CDN 加速子应用加载
以上方案可根据具体项目需求选择或组合使用。每种方案都有其适用场景，需根据团队技术栈和项目规模进行权衡。
