我i的Vue项目中,用到了Vue-cli3,路由懒加载模式,在本地调试和部署上都没有任何问题,一上线跳转路由的时候会偶尔出现Loading chunk {n} failed的报错,上网查了查:

   报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性太高了,而且有的手机上会出现,有的不会,用模拟器不会出现,用真机又会出现,不知道是网络原因还是webpack的bug。在github、stackoverflow等各种地方也找不到原因和解决方案,这是github上关于这个问题的讨论: Loading chunk {n} failed #742

前端解决办法:

import Vue from 'vue'
import Router from 'vue-router'
  {
    path: '/',
    component: () => import('@/page/index/HomePage.vue'),
    meta: {
      title: '首页'
    }
 },
  {
    path: '*',
    redirect: '/',
    meta: {}
  }
]
Vue.use(Router)
const $router = new Router({
  // mode: 'history',
  // 解决vue框架页面跳转有白色不可追踪色块的bug
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  },
  routes
})
// 解决Loading chunk (\d)+ failed问题
$router.onError((error) => {
  console.error(error)
  const pattern = /Loading chunk/g
  // const pattern = /Loading chunk (\d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  const targetPath = $router.history.pending.fullPath
  if (isChunkLoadFailed && error.type === 'missing') {
    // const targetPath = $router.history.pending.fullPath
    $router.push(targetPath)
  }
})
export default $router

 

Logo

前往低代码交流专区

更多推荐