这个是一个做项目中令我印象深刻的一点，我公司有个老项目是几年前用react进行开发的，但是现在我公司的技术栈是一目前最新的vue3为主，为了以后方便维护什么的，这个老项目在新增一个子模块需求的时候，要求用vue3进行开发，刚开始听到这个需求我还挺惊讶的，按理说两个框架在一个项目中应该是会有冲突的，因为之前我没有做过类似尝试刚开始有些担忧，但在一个经验丰富的老开发帮助之下，我居然实现了该种情况下的开发，下面是我整理的思路，大家可以参考：
下面这个项目（智勇平台）是用react进行开发的，需要单独增加一个使用vue3进行开发的内跑审批子模块：
其实也用很多种方案实现这个需求，我们是选择了新启动一个vue3项目开发内跑审批模块，然后使用iframe标签把该项目当作子模块内嵌入原来react框架进行开发的项目，这样做的时候，开发环境下基本上不会有太大影响（也有需要注意的地方），但是要注意打包的时候会有所不同：
新启的项目协议和端口为：http://localhost:5173 ,使用iframe嵌入老项目中，如下：
简单调整一下iframe以及其内容的样式，便会发现嵌入是相当成功的
（后面子项目的跨域什么的全部弄好，想正常的vue3项目一样开发即可）
这里本可以开心一下，但是注意，现在只完成了在开发环境下的工作，如果要打包时，你想一想，两个项目，两个url，怎么处理？
这里其实就是打包的时候多打一个就行了，再把打好的子模块包嵌入原来项目的包，需要做下配置： 在新vue3项目中的vite.config.ts文件中进行webpack配置，
添加一行 base:'np',这一行的作用待会解释：
然后在老项目的嵌入子项目的文件中也进行相应修改：
之后就可以进行打包上线了，需要两个项目都分别打一个包（打包命令：npm run build）：
这里重点来了，把新项目项目打的包（dist文件）复制到老项目的包根路径下面，并改名为np（对应刚才的base:'np'）
新项目：
老项目：
现在只需要老项目内嵌了新项目的包压缩发给后端部署上线即可（子项目的不需要压缩发给后端）：
这个时候后端运行项目正常，也就是说完成了需求！接下来在新项目中按照普通vue3的方式正常开发即可，注意子项目风格尽量和老项目保持一致哦
注意：
（1）base:'np'的作用： 在新项目打包前的入口文件index.html中：
打包以后：
（2）需要将老项目的身份令牌（token或者Cookie）共享给新项目，该项目是采用Cookie，直接在老项目中是发不通请求的，只能看静态页面效果（具体原因不知道）：
所以开发的时候只能麻烦点手动修改新项目的Cookie和老项目一致,使用新项目页面看需要和后台服务交互的效果：
这篇文章收获满满~
