转载:https://blog.csdn.net/Maximus_ckp/article/details/85079244

最近有个Vue项目中会偶尔出现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';

// 两种页面引入方式

// 方式1,将所有页面import进来,会打包成一个巨大的js,首页加载慢,后续页面加载快,不推荐
// import Page404 from '@/pages/Page404';
// import Indexfrom '@/pages/index';

// 方式2,路由懒加载,所有页面按需加载,推荐,但"Loading chunk {n} failed"出现几率高于方式1,原因未知
const Page404 = resolve => require(['@/pages/Page404'], resolve);
const Index= resolve => require(['@/pages/index'], resolve);

Vue.use(Router);
const $router = new Router({
    mode: 'history',
    // 解决vue框架页面跳转有白色不可追踪色块的bug
    scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
    },
    routes: [
        {
            path: '*',
            name: page404
            component: Page404
        },
         {
            path: '/index',
            name: index
            component: Index
        },
    ]
})
// 解决Loading chunk (\d)+ failed问题
$router.onError((error) => {
    const pattern = /Loading chunk (\d)+ failed/g;
    const isChunkLoadFailed = error.message.match(pattern);
    if(isChunkLoadFailed){
    	// 用路由的replace方法,并没有相当于F5刷新页面,失败的js文件并没有从新请求,会导致一直尝试replace页面导致死循环,而用 location.reload 方法,相当于触发F5刷新页面,虽然用户体验上来说会有刷新加载察觉,但不会导致页面卡死及死循环,从而曲线救国解决该问题
        location.reload();
        // const targetPath = $router.history.pending.fullPath;
        // $router.replace(targetPath);
    }
    
  });
export default $router;

 

Logo

前往低代码交流专区

更多推荐