Vue项目中出现Loading chunk {n} failed问题的解决方法

最新推荐文章于 2024-06-27 12:05:04 发布

原创最新推荐文章于 2024-06-27 12:05:04 发布 · 952 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

11 篇文章

订阅专栏

本文介绍如何在使用Vue Router的hash模式时修复pending状态下fullPath获取失效的问题，并提供了一个onError事件处理函数，用于捕捉并解决'Loadingchunk{n}

这个在网上有很多解决方法

大部分这样的，

我发现当router为hash模式

router.history.pending.fullPath获取不到值

测试得知改成这样

router.history.current.fullPath

/**
 * 解决偶尔出现Loading chunk {n} failed的报错
 */
router.onError((error) => {
  console.error('路由异常', error)
  const pattern = /Loading chunk (\d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  const targetPath = router.history.current.fullPath
  if (isChunkLoadFailed) {
    router.replace(targetPath)
  }
})