基于vite配置模块联邦（修改版本）

一、MF 引出下面两个概念：

• Host：引用了其他应用模块的应用, 即当前应用
• Remote：被其他应用使用模块的应用， 即远程应用

二、在vite中配置---在host端加载remote端导出的页面

2.1 安装 @originjs/vite-plugin-federation

vite-plugin-federation是一款为vite提供，用于支持多个独立构建的应用可以将自己的部分能力作为组件提供出来，组成一个应用程序。他们之间不存在相互依赖，可以进行独立的开发和部署。灵感来源于webpack 5提供的Module Federation特性。它通过vite和rollup提供的hock，对构建文件进行干预，从而将所有远程模块的组件，汇总到remoteEntry.js中。本地模块通过remoteEntry.js入口，从而调用加载三方组件以及组件编译后的js、css等文件。

// 使用npm
npm install  @originjs/vite-plugin-federation --save-dev

// 使用yarn
yarn add  @originjs/vite-plugin-federation --dev

// 使用pnpm
pnpm install @originjs/vite-plugin-federation --D

2.2 新建项目文件

1.新建一个文件夹projects（自定义）

在该文件夹下创建三个项目，npm create vite@latest此命令重复三次即可

host-vite：动态加载、运行远程模块

remote-host-vite：既能加载、运行远程模块，又能提供远程模块

remote-vite：提供远程模块

2.用vscode打开projects文件夹

注意：以下步骤重复三次（因为创建了三个项目，一个host端两个remote端