最近我有这样的需求：

1. 在一个项目里同时使用 Vue 和 React
2. 全程使用 Vite 3 开发和打包
3. 全程使用 TypeScript 开发

首先我尝试了一些微前端框架，但是遇到一些问题。索性就自己尝试手写一个微前端框架，功能满足自己的要求即可，不需要沙箱、样式隔离等功能。

代码：FrankFang/micro-frontend-starter (github.com)

原理

原理十分简单，pkg 目录中有三个子目录：container、app1 和 app2。

其中，

• container 是容器应用，app1 是 Vue 子应用，app 2 是 React 子应用
• container 应用的核心代码是 MicroApp 组件，该组件会在 mounted 时加载子应用的 entry
• container 本身是用 Vue 3 实现的，引入了 Vue Router，它会根据路由来切换显示不同的 MiscroApp 组件
• 开发模式下，entry 为子应用的 main.tsx；build 模式下，entry 为子应用的 manifest.json

大概就是这样。