• Vue打包后放到服务器出现Loading chunk {n} failed 错误


    导航栏点击切换时 会出现Loading chunk {n} failed  ,刷新之后便不会出现。而且n在最新的build的文件中,n没有存在

    偶然一次发现,项目更新迭代开发时上传测试环境后就会出现,当我们打包后某些js文件会改变,再上传到服务器后,由于浏览器缓存问题,用户在访问的时候还会再访问之前的js文件。就会出现Loading chunk {n} failed这种报错,

    思考到了路由懒加载的情况下,访问当前应用进行路由跳转时都是实时动态的从服务器上拉取相应模块的js文件,这时候我们改完代码打包上线,js文件名更换了,路由跳转的时候由于页面并未刷新,所以还是访问的原来的文件名,这是就会出现找不到模块的错误。


    解决办法:

    我们需要给路由加一个错误的回调方法,在监听到路由报错之后进行页面刷新操作,这时就可以获取到当前最新的代码来解决报错问题。

    /* 路由异常错误处理,尝试解析一个异步组件时发生错误,重新渲染目标页面 */
    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);
    }
    });

  • 相关阅读:
    java对象的四种引用
    linux安装python3
    ORACLE配置重做日志文件
    oracle添加控制文件,ORA-00214: 错误
    oracle new 和old 关键字
    with open
    json库
    requests
    urllib模块
    python读取txt天气数据并使用matplotlib模块绘图
  • 原文地址:https://www.cnblogs.com/FACESCORE/p/11308740.html
Copyright © 2020-2023  润新知