vite-plugin-federation-plus

Vite Module Federation 插件，支持 CSS 路径修复、共享模块预加载等增强特性。

特性

• ✅ 修复 remote entry 中 CSS 引用路径错误（相对路径处理）
• ✅ 支持 cssCodeSplit: false 场景下的 CSS 路径
• ✅ 与 Vite 5.x 兼容
• ✅ 开发模式和生产模式均支持
• ✅ 支持 shared 模块 modulePreload

安装

npm install vite-plugin-federation-plus

快速开始

// vite.config.ts
import federation from 'vite-plugin-federation-plus'

export default {
  plugins: [
    federation({
      name: 'host',
      remotes: {
        remote_app: 'http://localhost:5001/assets/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
}

配置

FederationOptions

| 参数 | 类型 | 说明 | |------|------|------| | name | string | 应用名称 | | filename | string | remote entry 文件名，默认 remoteEntry.js | | exposes | Record<string, string \| ExposeOption> | 暴露的模块 | | remotes | Record<string, string \| RemoteOption> | 远程模块配置 | | shared | (string \| SharedOption)[] \| Record<string, SharedOption> | 共享模块 | | shareScope | string | 共享作用域 |

暴露模块

federation({
  name: 'remote',
  exposes: {
    './Button': './src/components/Button.vue',
    './utils': {
      import: './src/utils/index.ts',
      dontAppendStylesToHead: true,
    },
  },
})

远程模块

federation({
  name: 'host',
  remotes: {
    remote_app: {
      external: 'http://localhost:5001/assets/remoteEntry.js',
      format: 'esm',
      from: 'vite',
    },
  },
})

共享模块

federation({
  name: 'host',
  shared: {
    react: {
      requiredVersion: '^18.0.0',
      shareScope: 'default',
    },
    'react-dom': {
      import: false,
      generate: true,
    },
  },
})

License

MIT