@originjs/vite-plugin-federation使用之vite不同项目组件、模块共享

vite配置需要打包后执行vite preview，不支持本地调试。比较麻烦,不是很推荐，每次修改共享组件，都要重新打包后再执行vite preview。下面介绍下项目中如何使用

一 新建三个项目A、B、C，A、B是提供组件方，C是使用组件的主项目，新建三个vite项目，并安装依赖@originjs/vite-plugin-federation

npm init vite@latest

npm i @originjs/vite-plugin-federation -D

二、A、B新建组件，并在vite中配置公共组件和共享模块

2.1 vite项目A:team-blue,新建组件BasketInfo、BuyButton。

vite配置如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import ElementPlus from 'unplugin-element-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ElementPlus(),
    cssInjectedByJsPlugin(),
    vue(),
    federation({
      name: 'team-blue',
      filename: 'remoteEntry.js',
      exposes: {
          './BasketInfo': './src/components/BasketInfo.vue',
          './BuyButton': './src/components/BuyButton.vue',
      },
      shared: ['vue', 'pinia']
    })
  ],
  build: {
    minify: false,
    target: ["chrome89", "edge89", "firefox89", "safari15"]
 }
})

2.2 vite项目B:team-green,新建组件Recommendations。

vite配置如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    cssInjectedByJsPlugin(),
    federation({
      name: 'team-green',
      filename: 'remoteEntry.js',
      exposes: {
          './Recommendations': './src/components/Recommendations.vue',
      },
      shared: ['vue', 'pinia']
    })
  ],
  base: 'http://localhost:5001',
  build: {
    minify: false,
    target: ["chrome89", "edge89", "firefox89", "safari15"]
 }
})

三、主项目引入远程组件

3.1 在vite项目C:team-red中使用team-green,team-blue暴露的公共组件

vite配置如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from "@originjs/vite-plugin-federation"
import ElementPlus from 'unplugin-element-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ElementPlus(),
    vue(),
    federation({
      name: 'team-red',
      remotes: {
        "team-blue": "http://localhost:5002/assets/remoteEntry.js",
        "team-green": "http://localhost:5001/assets/remoteEntry.js",
      },
      shared: ['vue','pinia']
  })
  ],
  build:{
    minify:false,
    target: ["chrome89", "edge89", "firefox89", "safari15"]
  }
})

四、本地调试

4.1 team-blue、team-green的package.json的script配置如下：

{
    …
 "scripts": {
    "dev": "vite --port 5002 --strictPort",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview --port 5002 --strictPort",
    "clean": "rm -rf dist",
    "stop": "kill-port --port 5002"
  },
    …

}

4.2 team-blue、team-green执行打包命令npm run build，然后执行package.json中配置的预览命令npm run serve

4.3 启动team-red项目的npm run dev命令即可看到引入组件效果。