场景

生产环境重新部署后，如果用户再次点击，组件又做了懒加载处理，会报Error: Loading chunk * failed.的错误

缘由

这种情况是因为 用户浏览过A模块在浏览器缓存了，部署上线后，A模块因为浏览器缓存机制是可以正常访问浏览的，当用户通过A模块去访问异步加载的B组件的时候，由于每次打包的文件hash值不同，在服务器上找不到B模块，所以就会抛出Error: Loading chunk * failed.的错误

解决方法

遇到这种场景，我们可以利用vue路由onError函数来处理，如果报错，我们就重新刷新页面，以达到资源刷新的目的

代码：

/* 路由异常错误处理，尝试解析一个异步组件时发生错误，重新渲染目标页面 */
router.onError((error) => {
    const pattern = /Loading chunk (\d)+ failed/g;
    const isChunkLoadFailed = error.message.match(pattern);
    console.log(isChunkLoadFailed,'/Loading chunk (\d)+ failed/g','路由懒加载找不到对应的moudle')
    if (isChunkLoadFailed) {
        window.location.reload();
    }else{
        console.log(error)
    }
});