Vue - Load chunk xxxx failed

Posted on   |   In

错误描述

code split 是 SPA 中常用的优化方式, 一般基于路由分割. 每个路由会拆分为不同的独立 js.

但不管是 react /vue 有时都会遇到切换路由的时候发生 Load chunk xxxx failed 的错误. 几率不大, 但是目前我还未找到一个大家公认的原因.

所有我们需要 catch 这个错误.

Vue

router.onError(error => {
  const pattern = /Loading chunk ([a-z]|[0-9]|-)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  // const targetPath = router.fullPath;
  if (isChunkLoadFailed) {
    Vue.prototype.$alert('网页资源加载失败,请刷新页面', '提示', {
      confirmButtonText: '确定',
      callback: () => {
        location.replace(location.href);
      }
    });
  }
});

catch 到给用户一个提示, 让他刷新页面