技术栈：qiankun，vite，vue，vue-router，element-plus，tailwindcss

本项目是基于vite搭建的qiankun项目，在vite中使用qiankun网上有两种方案

1、方案一：修改vite默认输出的target模式，将module改为esnext，开发环境主应用无法联通子应用

2、方案二：使用vite-plugin-qiankun插件

本项目提供第三种方案：在主应用定义子应用的生命周期函数，通过重写乾坤fetch方法将子应用入口文件用script标签加载，并使用@rollup/plugin-alias插件解决应用组件共享问题

# 主应用
cd main
npm i

# 子应用1
cd ../sub1
npm i

# 子应用2
cd ../sub2
npm i

# 在 main 目录下
npm run dev

# 在 sub1 目录下
npm run dev

# 在 sub2 目录下
npm run dev

打开浏览器访问http://localhost:5173/

# 在 main 目录下
npm run build

# 在 sub1 目录下
npm run build

# 在 sub2 目录下
npm run build

将main/dist目录内容放到静态服务器上即可运行

• 在主应用创建子应用生命周期，重写乾坤fetch方法解决开发环境访问子应用问题
• 在.env文件配置子应用包名
• 用@rollup/plugin-alias插件解决公共模块依赖问题
• 主应用和子应用保持相同路由解决浏览器历史记录错误问题

• 路由命名尽量与组件文件位置保持一致，长得丑没关系，重要的是方便维护，工程越大，找文件成本越高
• 对外共享的组件内部import其它文件时要用相对路径，不能用@开头的路径，避免调用组件方找不到位置
• 乾坤prefetch配置为false，禁止预加载子应用避免开发环境非首个加载的子应用不生效

支持作分享更多前端技术，不需要打赏一块几毛，不需要请作者喝咖啡，只需要下载作者和他兄弟开发的游戏就ok

TapTap平台《三国时代2》

TapTap平台《仙湖棋局》