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

场景:

基于qiankun的微前端博客系统,下面两个功能模块是使用微前端的方式进行加载的。
在这里插入图片描述

遇到的问题:

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

查看打包配置和打包结果
在这里插入图片描述
在这里插入图片描述
这些都是没有问题的,线上nginx配置
在这里插入图片描述

出现原因

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

在这里插入图片描述

解决方案

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
很抱歉,我之前的回答理解有误,这里我重新回答一下你的问题。 路由是前端开发中常用的概念,用于实现不同页面之间的切换和跳转。在Vue.js框架中,路由功能由Vue Router提供,通过定义路由映射表和使用路由链接来实现页面之间的跳转。 Vue Router中的路由模式有两种:hash模式和history模式。hash模式下,路由信息会以#号加上路径的形式出现在URL中,而history模式下,路由信息会以正常的路径形式出现在URL中。开发人员可以根据项目需要选择合适的路由模式。 在Vue Router中,还可以使用守卫来控制路由跳转。守卫分为全局守卫和路由守卫两种,全局守卫可以对整个应用程序进行控制,而路由守卫则可以针对某个具体的路由进行控制。开发人员可以在守卫中编写逻辑代码,以控制路由是否允许跳转。 另外,Vue Router还提供了懒加载功能,可以让页面在需要时才进行加载,从而提高页面加载速度和性能。开发人员可以在路由配置中使用component属性来指定组件,而这个组件可以是一个函数,用于返回一个Vue组件对象,从而实现懒加载。 总的来说,Vue Router作为Vue.js框架的一部分,为开发人员提供了方便的路由功能,帮助开发人员实现页面之间的跳转和控制。同时,Vue Router还提供了守卫和懒加载等功能,可以帮助开发人员更好地控制和优化应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程小飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值