发版迭代导致懒加载路由跳转报错。

后台管理系统,vue.config.js 去掉了预加载。

当版本迭代,某个菜单发版了,当用户未刷新时,点击改菜单没有反应。

原因是因为懒加载需要请求改菜单的js,发版导致哈希值变化,找不到该文件。

解决方案

拦截路由报错,进行重载页面。


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

如何进行本地模拟调试

  1. 使用 router.beforeEach 拦截目标路由,throw Error 模拟
  2. 使用浏览器对加载的js文件,进行block处理,阻止网络请求。(network面板 点击目标js,右键选择 Block request domain)

你可能感兴趣的:(发版迭代导致懒加载路由跳转报错。)