这个报错的主要原因是因为vue通过webpack打包生成多个模块js文件,我们把build后的文件上传到服务器,这时是第一次上传,我们访问时不会出现该报错。但是正常的项目都会需要更新迭代,当我们再次打包后某些js文件就会改变,再上传到服务器后,由于浏览器缓存index.html的问题,或者是用户正在访问网站的时候,还会再访问之前的js文件,这时就会出现Loading chunk {n} failed这种报错。
哪怕我们解决浏览器的缓存问题也不能避免掉这种情况,尤其是在开发时上传测试环境就会经常碰见这种情况。比如:因为一般Vue项目大部分都是单页面应用,当我们使用vue-router并且使用路由懒加载的情况下,我们访问当前应用进行路由跳转时都是实时动态的从服务器上拉取相应模块的js文件,这时候我们改完代码打包上线,js文件名更换了,路由跳转的时候由于页面并未刷新,所以还是访问的原来的文件名,这是就会出现找不到模块的错误。
接下来说解决办法:
我们需要给路由加一个错误的回调方法,在监听到路由报错之后进行页面刷新操作,这时就可以获取到当前最新的代码来解决报错问题。

router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  if (isChunkLoadFailed) {
    window.location.reload();
    // router.replace(router.history.pending.fullPath);
  }else{
    console.log(error)
  }
});
Logo

前往低代码交流专区

更多推荐