Vue Router懒加载报错本质是动态import失败，需用router.onError捕获并重试导航，配合防抖、次数限制及publicPath、hash命名等预防措施。

Vue Router 懒加载报错（如 Loading chunk X failed）本质是动态 import 失败，通常由网络中断、资源 404、CDN 缓存旧文件或部署路径配置错误引起。这类错误不会自动重试，需主动捕获并干预导航流程。

监听并识别懒加载失败

利用 Vue Router 提供的 router.onError() 全局错误钩子，专门捕获异步组件加载异常：

• 错误消息中含 Loading chunk 字样是典型特征，可用正则匹配确认
• 该钩子只在路由解析阶段（非守卫内抛错）触发，正好覆盖组件动态导入失败场景
• 注意：它不拦截 404 页面本身，也不处理已加载组件内部的错误

执行页面级重试（最常用方案）

检测到 chunk 加载失败后，直接用 router.replace() 触发一次相同路径的重新导航，让浏览器再次尝试拉取资源：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 代码示例（适配 Vue 2/3）：

  router.onError(error => {
    const isChunkError = /Loading chunk \d+ failed/.test(error.message);
    if (isChunkError && router.history.pending) {
      const { fullPath } = router.history.pending;
      router.replace(fullPath);
    }
  });

• 优点：简单可靠，用户无感，适合偶发网络抖动
• 缺点：若资源真实缺失（如部署漏文件），会无限重试，建议配合服务端 fallback 或降级策略

增强容错：添加防抖与次数限制

避免因持续失败导致死循环，可在重试逻辑中加入基础控制：

• 记录当前路径最近一次重试时间，间隔小于 1 秒不重复触发
• 对同一路径最多重试 2 次，超过则跳转到维护页或展示友好提示
• 结合 window.location.reload() 作为最终兜底（慎用，仅限关键页面）

配套预防措施不能少

重试只是补救，真正减少报错要从根源入手：

• 检查 publicPath 配置：Vue CLI 项目确保 vue.config.js 中 publicPath 与实际部署路径一致（如设为 './' 或 '/'，避免相对路径出错）
• 启用完整 hash 命名：Webpack 的 output.filename 和 chunkFilename 应含 [contenthash]，防止浏览器缓存旧 chunk
• 服务端配置 fallback：History 模式下，所有未命中静态资源的请求必须返回 index.html，否则刷新即 404 连带 chunk 加载失败

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！