无界微前端实战：从零构建Vue与React多应用协同开发

1. 为什么选择无界微前端

最近在重构公司的一个老项目时，遇到了一个典型的技术栈升级难题：部分模块用Vue2开发，部分用Vue3，还有几个新模块想用React试试。这种多框架混用的场景下，无界微前端成了我的救命稻草。

无界最大的优势在于它采用了WebComponent + iframe的沙箱方案。想象一下，iframe就像是一个自带隔离功能的集装箱，而WebComponent则是这个集装箱的智能装卸系统。这种组合既保留了iframe的原生隔离特性，又解决了传统iframe在路由同步、通信等方面的痛点。

我对比过几种主流方案：qiankun需要复杂的路由改造，micro-app对Vite支持不够友好，而EMP又强依赖Webpack。无界在这些方面都做得更优雅，特别是对Vite项目的开箱即用支持，让我这种喜欢尝鲜的人特别受用。

2. 环境准备与项目初始化

2.1 创建主应用和子应用

先新建一个工作目录，我用Vite快速初始化了三个项目：

# 创建主应用（Vue3）
npm create vite@latest main-app --template vue

# 创建Vue子应用
npm create vite@latest sub-vue --template vue

# 创建React子应用
npm create vite@latest sub-react --template react

这里有个小技巧：为了避免端口冲突，我习惯在package.json中预先配置好端口号。比如主应用用5173，Vue子应用用5174，React子应用用5175。

2.2 安装无界依赖

在主应用中安装对应版本的wujie：

# Vue3主应用
npm install wujie-vue3 -S

# 如果是Vue2主应用
npm install wujie-vue2 -S

对于React主应用，可以安装wujie