vue微前端实现

微前端概念

微前端是一种将多个独立前端应用组合成一个整体的架构模式，适用于大型项目或团队协作。Vue 作为前端框架之一，可通过多种方式实现微前端。

基于 Module Federation 的实现

Module Federation 是 Webpack 5 提供的功能，支持跨应用共享模块：

1. 配置主应用（Host）
   在 webpack.config.js 中配置 ModuleFederationPlugin，暴露需要共享的模块：

   new ModuleFederationPlugin({
     name: 'hostApp',
     remotes: {
       microApp: 'microApp@http://localhost:3001/remoteEntry.js',
     },
     shared: ['vue', 'vue-router']
   })

2. 配置子应用（Remote）
   子应用需独立部署并暴露组件或路由：

   new ModuleFederationPlugin({
     name: 'microApp',
     filename: 'remoteEntry.js',
     exposes: {
       './Button': './src/components/Button.vue',
     },
     shared: ['vue']
   })

3. 主应用动态加载子应用
   通过异步方式加载子应用组件：

   const Button = () => import('microApp/Button');

基于 Single-SPA 的实现

Single-SPA 是一个微前端框架，支持多框架集成：

1. 主应用注册子应用
   在主应用中配置子应用入口：

   singleSpa.registerApplication({
     name: 'vueApp',
     app: () => System.import('vueApp'),
     activeWhen: '/vue'
   });

2. 子应用适配 Single-SPA
   子应用需导出生命周期钩子（bootstrap、mount、unmount）：

   export async function mount(props) {
     new Vue({
       render: h => h(App),
     }).$mount('#vue-container');
   }

3. 路由配置
   使用 single-spa-vue 适配 Vue 路由：

   const vueLifecycles = singleSpaVue({
     Vue,
     appOptions: {
       router,
       render: h => h(App)
     }
   });

基于 iframe 的简单方案

适用于快速隔离的场景，但通信受限：

<iframe src="https://子应用域名" style="width:100%; height:500px;"></iframe>

通过 postMessage 实现父子应用通信。

注意事项

• 样式隔离：使用 Shadow DOM 或 CSS 命名空间（如 BEM）。
• 状态共享：通过自定义事件、Vuex/Pinia 或 URL 参数传递。
• 构建优化：子应用按需加载，避免主应用打包体积过大。

以上方案可根据项目需求选择，Module Federation 适合 Webpack 生态，Single-SPA 更灵活但配置复杂。