关于vue.js:解决vue项目打包上传到服务器加载出现Loading-chunk-n-failed提示错误

如果呈现了该提醒谬误,浏览器后退后退按钮都不可用了,必须要点击刷新按钮页面能力失常加载
如图所示:

通过查看vue-router文档有一个router.onError的回调函数:原理就是在监听到路由报错信息后主动进行页面刷新,获取最新的代码。
具体方法在router目录下的index.js文件中增加代码如下:

router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  const targetPath = router.history.pending.fullPath
  if (isChunkLoadFailed) {
      router.replace(targetPath)
  }
})

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理