其他分享
首页 > 其他分享> > vue qiankun 子页面 不显示也不报错

vue qiankun 子页面 不显示也不报错

作者:互联网

业务背景:原内管平台子系统越来越多,项目越来越大,打包发布需要十几分钟,本地运行npm run dev都非常容易因为内存不够导致崩溃(虚拟桌面内存就8G),业务打算将渠道管理平台中的一个子系统独立出来,用qiankun改成微前端架构。


介绍 - qiankunhttps://qiankun.umijs.org/zh/guide

遇到的问题:从主应用访问子应用时,控制台不报错,但是页面显示空白。

之前在测试demo中成功搭建过一次,由于过了两周印象不是很深刻,打算再重新搭建一次demo,主应用和微应用各自都可以正常访问,从主应用访问微应用时,发现显示显示一片空白,并且不报错,但是切换路由访问不同菜单,控制台有日志打印(上次搭建成功也有日志打印),如下图。

推断main.js、跨域之类的地方应该是没有问题的,肯定是哪个奇怪的地方有问题。

最终对比两套demo反复控制变量尝试,成功发现问题居然出在了容器命名上。

错误原因:主应用中main.js中注册微应用app的container名字不可与微应用中相同:

我为了统一方便代码阅读,在主应用和微应用中都定义为contractCenter,没想到这还出了问题。

解决办法:修改微应用中的容器名。

子系统(微应用)中其中共有3处需要修改(我将微应用中contractCenter修改为sub):

修改之后,就可以正常访问了。

 

另外有些情况下

不显示内容可能是因为路由不一致。比如微应用中首页是根目录

 但是主应用访问微应用的路由为: localhost:8083/#/contractCenter

这里微应用的首页路由应该和主应用中的一致:

 于是将微应用中首页路由也改为:

 即可正常显示了。

或者

直接在app.vue中加入醒目提示,只要加载成功就显示,不管路由是否一致,方便排查问题:

访问不到首页内容,但是也会显示东西:

 

 

标签:显示,vue,qiankun,访问,报错,首页,应用,路由
来源: https://blog.csdn.net/qq_16382227/article/details/122454538