vue微前端如何实现
vue微前端实现方案
Vue微前端可以通过多种方式实现，以下是几种主流方案：
qiankun框架集成
qiankun是蚂蚁金服开源的微前端解决方案，支持Vue项目集成。在主应用中注册子应用，子应用可以是Vue、React等不同技术栈。主应用通过配置entry和container加载子应用。
子应用需要暴露生命周期钩子：
export async function bootstrap() {
console.log('vue app bootstraped');
}
export async function mount(props) {
render(props);
}
export async function unmount() {
instance.$destroy();
}Webpack Module Federation
Webpack 5的模块联邦特性可以实现微前端架构。通过remotes配置共享模块，实现应用间组件共享。
主应用配置：
new ModuleFederationPlugin({
name: 'host',
remotes: {
app1: 'app1@http://localhost:3001/remoteEntry.js'
}
})子应用配置：
new ModuleFederationPlugin({
name: 'app1',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button.vue'
}
})iframe方案
使用iframe加载子应用，简单但隔离性强。通过postMessage实现通信，样式和全局变量完全隔离。
主应用代码：
<iframe src="http://child-app.com" id="frame"></iframe>通信示例：
window.addEventListener('message', (event) => {
if(event.origin !== 'http://child-app.com') return;
console.log('收到消息', event.data);
});单SPA方案
single-spa是一个微前端框架，支持Vue应用。需要为Vue应用创建特定生命周期函数，并在主应用中注册。
注册子应用：
singleSpa.registerApplication({
name: 'vue-app',
app: () => System.import('vue-app'),
activeWhen: '/vue'
});样式隔离方案
微前端需要处理样式隔离问题，可采用以下方式：
- Shadow DOM实现完全隔离
- CSS Modules或Scoped CSS
- 命名空间前缀约定
Shadow DOM示例：
const shadow = element.attachShadow({mode: 'open'});
shadow.innerHTML = `
<style>
/* 样式只作用于shadow DOM内部 */
</style>
<div>子应用内容</div>
`;状态管理共享
微前端应用间共享状态可采用：
- 自定义事件通信
- Redux或Vuex全局store
- localStorage或sessionStorage
自定义事件示例：
// 主应用派发事件
window.dispatchEvent(new CustomEvent('global-event', {detail: data}));
// 子应用监听
window.addEventListener('global-event', handler);每种方案各有优缺点，qiankun适合复杂场景但较重，Module Federation更灵活但对Webpack 5有要求，iframe简单但体验较差。应根据项目需求选择合适的实现方式。
