上图省略部分方法，详情请看本节末尾的Demo实例，代码实现的目的是为了构建html文件作为子应用的入口，构建结果如下所示👇
其他环节跟基于Webpack的配置大致相同，这里不一一赘述
虽然这种方式针对生产模式可以实现集成，但是存在两个局限性：
- 我们知道为了让
qiankun拿到子应用export的生命周期函数，所以需要将子应用打包成umd格式，而vite的code-splitting(代码分割)功能并不支持iife和umd两种格式，这会导致路由无法实现懒加载。
- 图片最终会被打包成
base64
更详细的Demo集成例子：👉 app-vue-vite
2.2 解决开发模式 + 生产模式的集成
单独解决生产模式的集成也不方便，毕竟很多时候需要我们在本地环节进行调试，那有什么方式可以同时让Vite支持这两种模式的集成呢？
Github上有一名开源作者开发了一款Vite插件叫vite-plugin-qiankun，通过这个插件可以在qiankun下走通这两种模式。甚至保留了vite构建模块的优势
- 修改
Vite.config.js
2. 修改子应用的main.ts，将生命周期mount、bootstrap、unmount 等通过插件函数renderWithQiankun在其中暴露完成。其他配置与基于webpack构建的子应用相同
⏰ 注意事项：
- qiankun官方是以
window.__POWERED_BY_QIANKUN__来判断当前是否为qiankun环境下，而该插件引用之后是通过qiankunWindow.__POWERED_BY_QIANKUN__来判断
🐸 局限性：
- 生产模式下依旧不支持
publicPath, 需要将vite.config.js中base配置写死。导致多环境部署不便捷。无法像在webpack结合window.INJECTED_PUBLIC_PATH_BY_QIANKUN+publicpath来解决
更详细的Demo集成例子：👉 viteapp
2.3 Vite对runtime publicpath的支持
目前在Vite官方文档没查阅到相关的配置，但在Github中找到一个插件vite-plugin-dynamic-publicpath。如果你有更好的解决方案，也欢迎评论区留言
2.4 关于Vite的Dotenv配置
如果你从 vue-cli 切换到Vite 需要注意 Dotenv 命名的变化
vite前缀是VITE_，vue-cli是VUE_APP_- 获取方式也不一样，在
vite是通过import.meta.env，而在vue-cli则是通过process.env
3.最后
如果你有其他解决方式，欢迎在评论区留言，也可以加我微信，我们一起喝茶🍵 讨论
