微前端项目改造

该项目为一个大型的中台系统,功能很多,业务有不同方向的拓展,且每个模块有不同的迭代周期和团队来维护,在同一个工程下难以达成目标,现将模块按照业务方向来进行划分,分为多个子应用,每个子应用可以独立开发和发布,使用qiankun 来实现,方案如下:
1.主应用申请一个一级域名,如:www.abc.com
2.每个子应用申请独立二级域名,如:a.abc.com,和主应用在同一个一级域名下,共享cookie的token等信息
3.主应用安装qiankun插件,添加配置
qiankun: {
master: {},
},
4.主应用入口文件配置子应用:

image.png

5.主应用路由匹配:
image.png

6.主应用向子应用传递参数:
image.png

7.子应用安装qiankun插件,添加配置;
qiankun: {
slave: {},
},
8.子应用接收参数
const masterProps = useModel('@@qiankunStateFromMaster');

你可能感兴趣的:(微前端项目改造)