qiankun vue 子应用页面刷新白屏

前言

项目使用微前端框架 qiankun, 主应用通过登录的用户权限控制显示子应用以及对应菜单页面，以及页面中的按钮等

项目版本

由于不同的库版本遇到的问题可能不一致，这里记录一下相关版本

• node: v16.13.0
• npm: 8.1.0
• vue: 2.6.11
• qiankun: 2.7.0

实际开发场景中遇到的白屏问题

日常开发中，先启动主应用，然后再启动子应用，在主应用中登录后，访问 qiankun 中挂载的子应用页面

在 qiankun 主应用中访问自应用，页面刷新数据正常加载，由于主应用中的服务由于运维环境变化，出现主应用后端服务连续几天运行不正常，导致登录后的页面会自动退出到登录页，再次登录无法登录的情况，子应用的项目开发页面进不去了

由于项目开发进度比较赶，所以前端开发人员通过只访问子应用的方式先开发一些纯前端的静态页等内容，发现子应用的热更新效果异常，修改的子应用样式等代码无法实时预览，只能通过先访问 http://localhost:9530/ 主页刷新后，然后再通过页面的路由跳转按钮手动跳转到对应的功能页面才行

功能页面修改代码后通过刷新浏览器发现页面直接白屏了，查看浏览器控制台日志，报错提示 Uncaught SyntaxError: Unexpected token '<'

chrome-page.png

devtools.png

解决

出现这个问题是 webpack 资源路径配置导致的，由于在配置 qianduan 修改过 vue.config.js 中的 publicPath 配置, 现在把项目根目录下 vue.config.js 中修改 publicPath 的值，把 ./ 修改成 / 默认值, 重新启动项目，这时候页面刷新和热更新功能也都正常了

publicPath 官方描述: https://cli.vuejs.org/zh/config/index.html#publicpath

注意

子应用修改的项目级配置后面记得改回来，不然会影响 qiankun 整个项目的正常运行