Vite(Vue)微前端无法导入single-spa工具模块问题求助

我有一个基于single-spa的微前端项目，其中Vue微前端模块原本用vue-cli构建，现在正在迁移到Vite，迁移过程基本完成，但导入一个Webpack构建的工具模块（提供API调用能力，以浏览器端模块形式部署）时遇到问题。

初始错误 #

导入模块时出现Vite解析错误：

[vite] Internal server error: Failed to resolve entry for package "@project/example-api". The package may have incorrect main/module/exports specified in its package.json.

当前Vite配置（vite.config.ts） #

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import { fileURLToPath, URL } from 'url';

export default defineConfig({
  build: {
    rollupOptions: {
      external: [`@project/example-api`],
      input: `src/main.ts`,
      output: {
        assetFileNames: `js/app.[ext]`,
        chunkFileNames: `js/app.js`,
        entryFileNames: `js/app.js`,
        format: `system`,
        globals: {
          '@project/example-api': `@project/example-api`,
        },
      },
      preserveEntrySignatures: `strict`,
    },
    ssr: false,
  },
  plugins: [vue({
    template: {
      transformAssetUrls: {
        base: `/src`,
      },
    },
  })],
  optimizeDeps: {
    exclude: [`@project/example-api`],
  },
  resolve: {
    alias: [
      {
        find: `@`,
        replacement: fileURLToPath(new URL(`./src`, import.meta.url)),
      },
    ],
  },
});

尝试别名方案后的错误 #

我曾尝试给工具模块设置别名指向远程部署地址：

{
    find: `@project/example-api`,
    replacement: `http://example.com/mfe/example-api/example-api.js`,
},

但出现导出错误：

Uncaught SyntaxError: application '@project/navbar-mfe' died in status LOADING_SOURCE_CODE: The requested module 'http://example.com/mfe/example-api/example-api.js' does not provide an export named 'myApi' (at App.vue:19:12)

补充信息 #

• 根配置中已通过System.import预加载该模块：

......
<script>
    System.import('@project/root-config');
    System.import("@project/example-api");
</script>
......

• 工具模块的Webpack配置（webpack.config.js）：

const { merge } = require(`webpack-merge`);
const singleSpaDefaults = require(`webpack-config-single-spa-ts`);

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: `project`,
    projectName: `example-api`,
    webpackConfigEnv,
    argv,
    disableHtmlGeneration: true,
  });

  const deployTarget = webpackConfigEnv?.deployTarget ? `.${webpackConfigEnv.deployTarget.toLowerCase().trim()}` : `.dev`;
  const inputCopyConfigPattern = {
    from: `src/config/config${deployTarget}.json`,
    to: `src/config/config.json`,
  };

  return merge(defaultConfig, {
    // ....
  });
};

请问针对这种Webpack构建的System格式、单独部署且已在根配置通过System.import加载的模块，有没有其他方法让Vite构建的微前端正确导入？

解决方案 #

方案1：直接利用SystemJS全局加载的模块 #

既然模块已经通过根配置的System.import预加载完成，可以绕过Vite的ES模块解析逻辑，直接从SystemJS中获取模块：

// 替换原来的ES导入语句 import { myApi } from '@project/example-api'
const { myApi } = System.get('@project/example-api');

这种方式完全依赖SystemJS的全局模块管理，避免Vite与Webpack模块格式不兼容的问题。

方案2：添加Vite的SystemJS支持插件 #

使用vite-plugin-systemjs插件让Vite兼容System格式模块的导入：

1. 安装插件：

npm install vite-plugin-systemjs --save-dev

2. 修改vite.config.ts配置：

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import { fileURLToPath, URL } from 'url';
import systemjs from 'vite-plugin-systemjs';

export default defineConfig({
  build: {
    rollupOptions: {
      external: [`@project/example-api`],
      input: `src/main.ts`,
      output: {
        assetFileNames: `js/app.[ext]`,
        chunkFileNames: `js/app.js`,
        entryFileNames: `js/app.js`,
        format: `system`,
        globals: {
          '@project/example-api': `@project/example-api`,
        },
      },
      preserveEntrySignatures: `strict`,
    },
    ssr: false,
  },
  plugins: [
    vue({
      template: {
        transformAssetUrls: {
          base: `/src`,
        },
      },
    }),
    systemjs({
      externals: ['@project/example-api']
    })
  ],
  optimizeDeps: {
    exclude: [`@project/example-api`],
  },
  resolve: {
    alias: [
      {
        find: `@`,
        replacement: fileURLToPath(new URL(`./src`, import.meta.url)),
      },
    ],
  },
});

插件会自动处理外部System模块的导入逻辑，匹配已加载的模块导出。

方案3：修正工具模块的导出配置 #

确保Webpack构建的工具模块导出结构与ES模块兼容：

1. 在工具模块入口文件中明确导出API，并使用single-spa工具确保System格式导出正确：

import { singleSpaExportUtils } from 'single-spa';

export const myApi = { /* API内容 */ };

// 确保System模块导出正确
singleSpaExportUtils.exportModule({
  myApi
});

2. 在工具模块的package.json中补充正确的入口字段：

{
  "main": "dist/example-api.js",
  "module": "dist/example-api.js",
  "type": "system"
}

让Vite能正确识别模块的导出结构。

内容的提问来源于stack exchange，提问作者Salim Ben Hassine