业务背景：原内管平台子系统越来越多，项目越来越大，打包发布需要十几分钟，本地运行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中加入醒目提示，只要加载成功就显示，不管路由是否一致，方便排查问题：

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