如何通过Module Federation在Vue2中接入Vue3？是否有非升级方案？

核心逻辑 #

Vue3与Vue2的运行时API、组件渲染机制存在本质差异，直接通过Module Federation共享组件会因依赖不兼容报错。核心解决思路是做隔离适配，让Vue3组件在独立的Vue3运行环境中渲染，再嵌入Vue2宿主应用。

方案一：远程服务导出渲染初始化函数 #

1. Vue3远程服务配置

   • 在webpack的Module Federation配置中，不直接导出组件，而是导出一个能初始化并渲染Vue3组件的函数。
   • webpack配置示例：

     // Vue3远程服务的webpack.config.js
     module.exports = {
       plugins: [
         new ModuleFederationPlugin({
           name: 'vue3Remote',
           filename: 'remoteEntry.js',
           exposes: {
             './Vue3Widget': './src/components/Vue3WidgetWrapper.js'
           },
           shared: {
             vue: { singleton: true, requiredVersion: '^3.2.0' }
           }
         })
       ]
     }
     

   • 组件包装文件Vue3WidgetWrapper.js实现：

     import { createApp } from 'vue'
     import Vue3Widget from './Vue3Widget.vue'
     
     export function mount(el, props) {
       const app = createApp(Vue3Widget, props)
       app.mount(el)
       return {
         unmount() {
           app.unmount()
         }
       }
     }
     

2. Vue2宿主调用

   • 在Vue2组件中创建DOM容器，异步引入远程服务的渲染函数并执行，完成Vue3组件的嵌入。
   • Vue2组件示例：

     <template>
       <div ref="vue3Container"></div>
     </template>
     
     <script>
     export default {
       async mounted() {
         const { mount } = await import('vue3Remote/Vue3Widget')
         this.vue3Instance = mount(this.$refs.vue3Container, {
           msg: '来自Vue2宿主的参数'
         })
       },
       beforeDestroy() {
         this.vue3Instance?.unmount()
       }
     }
     </script>
     

方案二：通过Web Components桥接 #

1. Vue3远程服务转Web Component

   • 使用Vue3的defineCustomElementAPI将组件转为标准Web Components，实现跨框架兼容。
   • 转换代码示例：

     // Vue3组件转自定义元素
     import { defineCustomElement } from 'vue'
     import Vue3Widget from './Vue3Widget.vue'
     
     const Vue3WidgetElement = defineCustomElement(Vue3Widget)
     
     // 导出注册函数，避免重复注册
     export function registerWidget() {
       if (!customElements.get('vue3-widget')) {
         customElements.define('vue3-widget', Vue3WidgetElement)
       }
     }
     

2. Vue2宿主使用

   • 异步引入远程服务的注册函数，注册后直接在Vue2模板中使用自定义元素标签。
   • Vue2组件示例：

     <template>
       <vue3-widget :msg="hostMsg"></vue3-widget>
     </template>
     
     <script>
     export default {
       data() {
         return {
           hostMsg: 'Vue2传递的参数'
         }
       },
       async mounted() {
         const { registerWidget } = await import('vue3Remote/Vue3Widget')
         registerWidget()
       }
     }
     </script>
     

关键注意事项 #

• 禁止让Vue2和Vue3共享Vue依赖，Module Federation的shared配置中，Vue3的依赖需独立加载，不与Vue2宿主共享。
• 组件间通信优先使用自定义事件或跨框架状态管理工具，避免调用Vue版本专属API。

内容的提问来源于stack exchange，提问作者ysKim