使用懒加载之后,可能会造成的问题有,导航点击没用,加载模块出现错误

报错信息

vue-router.esm.js?8c4f:2314 ChunkLoadError: Loading chunk 85 failed.
(missing: http://localhost:3001/fail.js)
    at Function.requireEnsure [as e] (app.js:875)
    at Function.fn.e (app.js:156)
    at component (router.config.js?d73b:381)
    at eval (vue-router.esm.js?8c4f:2144)
    at eval (vue-router.esm.js?8c4f:2171)
    at Array.map (<anonymous>)
    at eval (vue-router.esm.js?8c4f:2171)
    at Array.map (<anonymous>)
    at flatMapComponents (vue-router.esm.js?8c4f:2170)
    at eval (vue-router.esm.js?8c4f:2106)

在这里插入图片描述

解决办法:运用vue-router的错误处理函数 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);
    }
})

详细说明可参考 Vue打包后放到服务器出现Loading chunk {n} failed 错误的解决办法

Logo

前往低代码交流专区

更多推荐