vue怎么实现微前端
实现 Vue 微前端的常见方法
使用 qiankun 框架
qiankun 是基于 single-spa 的微前端解决方案，支持 Vue 项目作为主应用或子应用。主应用中注册子应用，子应用需暴露生命周期钩子（bootstrap、mount、unmount）。配置 webpack 的 output 为 libraryTarget: 'umd' 确保子应用独立运行。
主应用配置示例：
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'vue-subapp',
entry: '//localhost:7101',
container: '#subapp-container',
activeRule: '/vue',
},
]);
start();子应用配置示例（vue.config.js）：
module.exports = {
devServer: { port: 7101 },
configureWebpack: {
output: {
library: `vue-subapp`,
libraryTarget: 'umd',
},
},
};基于 Module Federation 的 Webpack 5 方案
Webpack 5 的 Module Federation 允许跨应用共享模块。主应用和子应用需分别配置 exposes 和 remotes。子应用可独立部署，主应用动态加载子应用模块。
主应用配置示例：
new ModuleFederationPlugin({
name: 'host',
remotes: {
subapp: 'subapp@http://localhost:3001/remoteEntry.js',
},
});子应用配置示例：
new ModuleFederationPlugin({
name: 'subapp',
filename: 'remoteEntry.js',
exposes: {
'./App': './src/App.vue',
},
});使用 iframe 嵌套
传统 iframe 方式简单但隔离性强。通过 postMessage 实现通信，需处理跨域和样式隔离问题。适合需要完全隔离的场景，但路由状态同步较复杂。
通信示例：
// 父窗口
window.frames[0].postMessage({ type: 'event' }, '*');
// 子窗口
window.addEventListener('message', (event) => {
if (event.data.type === 'event') {
// 处理逻辑
}
});单实例与多实例模式
单实例模式同一时间只渲染一个子应用，适合业务关联性强的场景。多实例模式可同时渲染多个子应用，需注意样式和全局变量冲突，通过 Shadow DOM 或 CSS 命名空间隔离。
样式隔离示例：
/* 使用 BEM 命名规范 */
.subapp__container .button {
/* 子应用专用样式 */
}通信与状态管理
推荐使用自定义事件或状态管理库（如 Vuex/Pinia）的共享实例。qiankun 提供 initGlobalState 方法，子应用通过 onGlobalStateChange 监听变化。
全局状态示例：
// 主应用
import { initGlobalState } from 'qiankun';
const actions = initGlobalState({ user: null });
// 子应用
export function mount(props) {
props.onGlobalStateChange((state) => {
console.log(state.user);
});
}部署注意事项
子应用建议使用 CDN 加速资源加载，主应用通过环境变量动态配置子应用入口。确保子应用支持跨域访问，静态资源路径使用绝对地址。
动态配置示例：
const subappUrl = process.env.VUE_APP_SUBAPP_URL;
registerMicroApps([{ entry: subappUrl }]);以上方法根据项目复杂度、团队技术栈和隔离需求选择。qiankun 适合快速集成现有系统，Module Federation 更适合技术栈统一的新项目。
