记一次vue项目Loading chunk chunk-25849c4c failed.问题

5 篇文章 1 订阅
2 篇文章 0 订阅

表现:页面一段时间没打开再次打开后页面空白加载不出来,控制台看到有js文件加载失败,报错Loading chunk chunk-25849c4c failed.

于是看了网上的解决办法,路由onError处理

const pattern = /Loading chunk (\S)+ failed/g // 网上这里是\n 或者\d那是数字,我的是字符串改成了\S
  const isChunkLoadFailed = error.message.match(pattern)
  if (isChunkLoadFailed) {
     window.location.reload()
  } else {
    console.log(error.message)
  }

但是这样处理后我的问题变成页面直接变成503了,刷新会正常,而且强刷ctrl+f5出现概率很大

image.png

也不是一定503直接白屏,有时候是部分js加载失败,但是页面还是正常出来的,把这个js地址放浏览器看有时候直接有内容,有时候是503刷新后正常

image.png

于是又找了解决503的办法,实在是没有效果

由于这些文件是预加载文件,我就干脆将预加载去掉了,在配置文件vue.config.js加上

chainWebpack: (config) => {
  // 移除 prefetch preload 插件
  config.plugins.delete('preload')
  config.plugins.delete('prefetch')
}

强刷了几次试试没有那个问题了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值