【bug修复记录】微前端子应用间跳转报错

523 阅读1分钟

1. 背景: web前端应用,采用微前端架构,技术栈是vue-compositionapi、qiankun、vue-cli。 有基座base,子应用apps1、apps2、apps3,应用内采用异步加载

2. 现象: 路由第二次进入子应用时会报错,如:apps1 -> apps2 -> apps3 -> apps2

报错信息为:

image.png 会提示chunk加载失败,但实际该文件是可以访问的。

3. 原因: 渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。 这种情况想来应该是符合咱们的错误情况,因为刷新页面后,就不会报错,所以假设错误预想成立,那么下一步,我们在onError方法中,重新加载我们的目标页面,应该就可以解决问题。

4. 解决

image.png

注:因为是微前端,如直接通过router push 仍然会有问题,因为会在上一个子应用中调用router,所以要通过基座来重新push,如上代码,通过eventEmitter触发一个路由跳转