从Webpack转Vite后，如何在MicroFrontend.jsx配置React微前端入口？

一、React子应用（Vite）的入口改造 #

1. 调整入口文件（src/main.jsx） #

保持和原Webpack子应用一致的全局变量暴露逻辑，确保容器能调用到挂载/卸载方法，示例（假设子应用名称为app1）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 暴露挂载方法到全局，命名和容器传入的name参数对应
window[`mountapp1`] = (containerId) => {
  const root = ReactDOM.createRoot(document.getElementById(containerId));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  return root;
};

// 暴露卸载方法到全局
window[`unmountapp1`] = (containerId) => {
  const container = document.getElementById(containerId);
  if (container) {
    const root = ReactDOM.createRoot(container);
    root.unmount();
  }
};

// 本地开发时直接挂载到根节点
if (import.meta.env.DEV) {
  window[`mountapp1`]('root');
}

2. 配置Vite打包参数（vite.config.js） #

开启manifest生成并配置library模式，确保打包产物能正确暴露全局变量：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    // 生成manifest.json供容器加载资源
    manifest: true,
    rollupOptions: {
      // 指定自定义入口文件，禁用默认html入口
      input: './src/main.jsx',
      output: {
        // 声明外部依赖的全局变量名，避免重复打包React
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        },
        // 输出umd格式，兼容全局变量挂载
        format: 'umd'
      }
    },
    assetsDir: 'assets',
    outDir: 'build'
  },
  // 开发服务器允许跨域，方便容器本地加载子应用
  server: {
    cors: true,
    port: 3001 // 子应用专属端口，多个子应用需区分
  }
});

二、容器应用（MicroFrontend.jsx）的适配调整 #

Vite生成的manifest结构与Webpack不同，需修改资源加载逻辑，调整后的代码：

import { useEffect } from 'react';

const MicroFrontend = ({ name, host }) => {
  const scriptId = `micro-frontend-${name}`;
  const mountFn = `mount${name}`;
  const unmountFn = `unmount${name}`;

  const renderMicroFrontend = () => {
    window[mountFn](`${name}-container`);
  };

  useEffect(() => {
    if (document.getElementById(scriptId)) {
      renderMicroFrontend();
      return;
    }

    fetch(`${host}/manifest.json`)
      .then(res => res.json())
      .then(manifest => {
        // Vite manifest中入口js的key为配置的input路径
        const entryScript = manifest['src/main.jsx'].file;
        const script = document.createElement('script');
        script.id = scriptId;
        script.crossOrigin = '';
        script.src = `${host}/${entryScript}`;
        script.onload = renderMicroFrontend;
        document.head.appendChild(script);
      });

    return () => {
      window[unmountFn] && window[unmountFn](`${name}-container`);
      // 移除已加载的脚本，避免重复加载
      const script = document.getElementById(scriptId);
      if (script) document.head.removeChild(script);
    };
  }, [name, host]);

  return <div id={`${name}-container`} />;
};

export default MicroFrontend;

三、关键注意事项 #

• 子应用全局方法的命名必须和容器传入的name参数严格匹配（大小写一致）。
• 本地开发时，容器和子应用都需开启跨域配置，避免资源加载报错。
• 部署时，子应用的静态资源需部署到可公开访问的地址，容器通过host参数指定对应地址。

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