微前端模式下子应用的路由懒加载

最新推荐文章于 2024-09-15 15:47:06 发布

编程小飞

最新推荐文章于 2024-09-15 15:47:06 发布

阅读量2.4k

点赞数

文章标签：前端 vue.js react.js 微前端

本文链接：https://blog.csdn.net/qq_44606064/article/details/121909190

版权

本文讲述了在微前端环境下，开发人员在部署线上博客时遇到的问题，子应用（React和Vue）因路由懒加载而无法正确解析资源。作者探讨了问题原因、解决方案，包括禁用懒加载、手动修改路径，以及寻求自动调整webpack配置的优化方法。

摘要由CSDN通过智能技术生成

场景：

基于qiankun的微前端博客系统，下面两个功能模块是使用微前端的方式进行加载的。

遇到的问题：

在本地开发环境中，子应用都能正常加载进来。但是部署到线上环境中，博客主页子应用正常运行（React版）博客管理子应用（vue版）可以加载进来，但是无法解析加载进来的文件，加载chunk包失败，下图中的输出就是子应用中的代码，但是js文件无法加载到。

查看打包配置和打包结果
在这里插入图片描述

这些都是没有问题的，线上nginx配置

出现原因

这些都是没有问题的，后来想到博客管理的页面都是使用的路由懒加载，这些文件在加载的时候路径发生错误，下图中0.xx.js和1.xx.js就是动态加载的路由组件，从请求的url中看出显然请求路径少了一层/blogMannage。
在这里插入图片描述

在这里插入图片描述

解决方案

1.最简单的方式就是不适用路由的懒加载功能，这样在webpack打包的时候就会将包打到一起，不会出现分包加载路径出错的问题。
2.手动在打包好之后的js文件中找到动态加载路由的地方，将切换的地址手动加一层/blogMannage,如下图
在这里插入图片描述
3.我的优化想法是每次打包都要手动修改打包好的文件，这显然不方便，有没有一种直接修改webpack配置的方式，将所有动态切换路由的地方都自动加上自己想要的路径。在webpack官方文档中也没有找到类似的解决办法 求大佬帮助