• Error: Loading chunk * failed,Vue Router懒加载报错问题解决方案


    最近vue项目路由改成了懒加载方式,刚开始并没有什么问题,清空项目文件,重新下载配置运行后,就发现控制台报以下错误:

    [vue-router] Failed to resolve async component default:
    Error:Loading chunk 10 failed.

    刷新页面后,就不会再报错,思来想去应该使用路由懒加载后,组件加载异常导致的,但是究竟是什么原因,暂时不知,有知道的朋友可以留言。
    解决方案:
    Vue Router中有个错误处理函数onError,用于处理路由异常情况,请看说明:

    渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。
    这种情况想来应该是符合咱们的错误情况,因为刷新页面后,就不会报错,所以假设错误预想成立,那么下一步,我们在onError方法中,重新加载我们的目标页面,应该就可以解决问题。
    请看方案:

    /* 路由异常错误处理,尝试解析一个异步组件时发生错误,重新渲染目标页面 */

    router.onError((error) => {
    const pattern = /Loading chunk (\d)+ failed/g;
    const isChunkLoadFailed = error.message.match(pattern);
    const targetPath = router.history.pending.fullPath;
    if (isChunkLoadFailed) {
    router.replace(targetPath);
    }
    });

    原文链接:https://blog.csdn.net/zhongguohaoshaonian/article/details/95179057

  • 相关阅读:
    深入浅出SQL教程之Group by和Having
    AFNetworking3.0 Https P12证书
    C#访问注册表
    One reason for not able to show chinese correctly in installation
    Debugging DLL loading issues with GFLAGS
    RegistryFree COM Registration
    RegistrationFree COM Interop
    net use
    MS UI Automation原来如此
    取景器的视野率和放大倍率
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/15620479.html
Copyright © 2020-2023  润新知