Vite无法打包single-spa微前端应用问题求助

核心问题 #

迁移后使用Vite lib模式，访问localhost:<port_no>/xyz/abc.js时返回404，场景为无index.html的微前端应用。以下是针对性排查步骤：

1. 修正Vite lib模式的输出路径配置 #

Vite的lib模式默认输出到根目录或dist下，需强制指定输出路径与请求路径匹配：

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

export default defineConfig({
  plugins: [react()],
  base: '/xyz/', // 匹配请求路径的前缀
  build: {
    lib: {
      entry: './src/singleSPA.tsx', // 你的single-spa入口文件路径
      name: 'abcMicroApp',
      fileName: () => 'abc.js' // 输出文件名，配合base形成完整路径/xyz/abc.js
    },
    rollupOptions: {
      // 微前端需external框架依赖，避免重复打包
      external: ['single-spa', 'react', 'react-dom'],
      output: {
        globals: {
          'single-spa': 'singleSpa',
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  },
  server: {
    port: 3001, // 对应你的端口号
    cors: true, // 微前端跨域需求
    open: false // 无需打开页面（无index.html）
  }
});

开发模式下Vite将产物存在内存中，需确保base + fileName完全匹配请求路径/xyz/abc.js。

2. 对齐原CRACO配置的输出规则 #

检查原craco.config.js中的Webpack输出配置，确保Vite配置与之前的规则一致：

• 若原Webpack设置了output.publicPath: '/xyz/'，则Vite的base需设为对应值
• 若原Webpack输出文件名为abc.js，则Vite的lib.fileName需设为相同名称

3. 验证TS配置的模块兼容性 #

确保tsconfig.json的模块配置适配Vite的ES模块机制：

// tsconfig.json
{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2020",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

4. 确认single-spa入口的导出规范 #

singleSPA.tsx必须正确导出微前端生命周期函数，否则打包产物可能不符合预期：

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

export const bootstrap = async () => {
  // 初始化逻辑（如加载资源、配置环境）
};

export const mount = async (props: any) => {
  const root = ReactDOM.createRoot(props.domElement);
  root.render(<App {...props} />);
};

export const unmount = async (props: any) => {
  const root = ReactDOM.createRoot(props.domElement);
  root.unmount();
};

5. 开发服务器路径匹配验证 #

若仍出现404，可临时添加路由重写规则验证路径映射：

// vite.config.js -> server配置
server: {
  rewrite: {
    '^/xyz/abc.js': '/abc.js' // 若实际输出在根目录，临时重写路径测试
  }
}

此为临时调试方案，最终需通过base和lib.fileName配置解决。

6. 检查package.json脚本 #

确保开发脚本启动的是Vite开发服务器而非生产打包：

// package.json
"scripts": {
  "dev": "vite",
  "build": "tsc && vite build"
}

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