能否通过Module Federation将Vue.js应用作为微前端嵌入React.js应用？

完全可以通过Module Federation实现这个需求，以下是具体配置和消费步骤：

一、Vue应用端（Remote）配置 #

修改Vue项目的webpack.config.js（若为Vue CLI创建的项目，需通过vue.config.js配置webpack）：

1. 引入ModuleFederationPlugin

const { ModuleFederationPlugin } = require('webpack').container;
const packageJson = require('./package.json');

2. 在plugins数组中添加配置

plugins: [
  new ModuleFederationPlugin({
    // Remote应用的唯一标识
    name: 'VueApp',
    // 暴露的资源入口文件名
    filename: 'remoteEntry.js',
    // 暴露封装好的Vue挂载逻辑模块，而非直接暴露index.js
    exposes: {
      './VueAppWrapper': './src/vue-app-wrapper.js'
    },
    // 共享依赖（可选，避免重复打包）
    shared: {
      vue: {
        singleton: true,
        requiredVersion: packageJson.dependencies.vue
      }
    }
  })
]

3. 创建src/vue-app-wrapper.js文件，封装Vue组件的挂载/卸载逻辑

import { createApp } from 'vue';
import App from './App.vue';

// 导出挂载函数，接收容器ID，返回卸载方法供React调用
export function mountVueApp(containerId) {
  const app = createApp(App);
  app.mount(`#${containerId}`);
  
  return () => {
    app.unmount();
  };
}

二、React应用端（Host）配置 #

修改React项目的webpack.config.js：

1. 引入ModuleFederationPlugin

const { ModuleFederationPlugin } = require('webpack').container;
const packageJson = require('./package.json');

2. 在plugins数组中添加配置

plugins: [
  new ModuleFederationPlugin({
    // Host应用的唯一标识
    name: 'ReactApp',
    // 声明要加载的Remote应用，地址需为Vue应用启动后可访问remoteEntry.js的路径
    remotes: {
      VueApp: 'VueApp@http://localhost:8080/remoteEntry.js'
    },
    // 共享依赖（可选）
    shared: {
      react: {
        singleton: true,
        requiredVersion: packageJson.dependencies.react
      },
      'react-dom': {
        singleton: true,
        requiredVersion: packageJson.dependencies['react-dom']
      }
    }
  })
]

3. 创建React组件加载并渲染Vue应用

import { useEffect, useRef } from 'react';

// 动态引入Remote模块
const loadVueApp = async () => {
  const { mountVueApp } = await import('VueApp/VueAppWrapper');
  return mountVueApp;
};

export default function VueEmbeddedComponent() {
  const containerRef = useRef(null);
  const unmountVue = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // 加载并挂载Vue应用
    loadVueApp().then(mount => {
      unmountVue.current = mount('vue-container');
    });

    // 组件卸载时清理Vue应用
    return () => {
      if (unmountVue.current) {
        unmountVue.current();
      }
    };
  }, []);

  return <div id="vue-container" ref={containerRef}></div>;
}

4. 在React应用中使用该嵌入组件

import VueEmbeddedComponent from './VueEmbeddedComponent';

function App() {
  return (
    <div className="App">
      <h1>React 主应用</h1>
      <div style={{ border: '1px solid #ddd', padding: '16px', margin: '16px 0' }}>
        <h3>嵌入的Vue应用</h3>
        <VueEmbeddedComponent />
      </div>
    </div>
  );
}

export default App;

三、针对你之前失败情况的排查要点 #

• 避免直接暴露Vue的index.js：该文件通常是Vue应用的全局入口，直接暴露会导致不受控制的全局挂载，无法配合React的组件生命周期
• 确认Remote地址正确性：React配置中remotes的地址必须是Vue应用启动后，remoteEntry.js可访问的实际路径
• 保持webpack版本兼容：Module Federation要求Host和Remote使用同大版本的webpack（如webpack 5.x）
• 共享依赖开启singleton：若存在跨应用共享的依赖，需开启该配置避免多实例冲突

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