Vue开发中出现 Loading Chunk-###... Failed 的问题解决

错误分析

vue打包的时候采用了路由异步加载的方式。当访问了项目的某个界面（其他界面未访问，也就是未加载资源）时，加载了打包后的index.html入口文件，入口文件中会有其他异步加载的对应包，而在重新打包后这些包的名称发生了改变，这时候重新发布了项目。而你当前已经index.html。里面有跳转对应界面所需要的文件，但是这个文件是之前版本的文件，也就是说当你跳转一个未加载资源的界面，这时候用错误的路径去加载，然后报错。

问题确认

要解决Vue开发中接口出现“Loading Chunk Failed”的问题，我们需要完成以下步骤：

1. 检查网络连接
2. 清除浏览器缓存
3. 检查webpack配置

是详细的步骤说明：

步骤1：检查网络连接

首先，我们需要检查网络连接是否常。如果网络连接不稳定或断开，可能会导致“Loading Chunk Failed”的问题。我们可以尝试连接网络或者使用其他网络连接方式。

步骤2：清除浏览器缓存

如果网络连接正常，我们可以尝试清除浏览器缓存。以下是清除浏览器缓存的步骤：

1. 打开览器并进入开发者工具。
2. 选择Network选项卡。
3. 单击Clear按钮并刷新页面。

在清除浏览器缓存后我们应该能够重新加载页面并解决“Loading Chunk Failed”的问题。

步骤3：检查webpack配置

如果以上步骤都无法解决问题，我们需要检查webpack配置。以下是两个示例说明：

示例：检查publicPath配置

在配置中，我们需要设置publicPath来指定静态资源的路径。如果publicPath配置不正确，可能会导致“Loading Chunk Failed”的问题。以下是检查publicPath配置的步骤：

1. 打开webpack配置文件。
2. 搜索publicPath配置项。
3. 确保publicPath配置项的值正确。

例如，如果的静态资源存放在CDN上，我们需要将publicPath配置为CDN的地址。

示例2：检查output配置

在webpack配置中，我们需要设置output来指定打包后的文件输出路径。如果output配置不正确，可能会导致“Loading Chunk”的问题。以下是检查output配置的步骤：

1. 打开webpack配置文件。
2. 搜索output配置项。
3. 确保output配置项的值正确。

例如，如果我们的打包文件需要输出到指定的目录下，我们需要将output配置目录的路径。

总之，以上是“Vue开发中出现 Chunk Failed的问题解决”的完整攻略。我们需要检查网络连接、除浏览器缓和检查webpack配置来解决“Loading Chunk Failed”的问题。如果问题仍然存在，我们可以尝试重新安装依赖或者升级Vue版本。在检查webpack配置时我们需要特别注意publicPath和output配置的值是否正确。

解决方案

这个的解决方案很多可以用nginx解决但是这里直接用前端解决，这样减少一次请求。

在vue-router中有一个router.onError官方说明是：注册一个回调，该回调会在路由导航过程中出错时被调用

使用这个在报错时捕获错误，重新加载资源

router.onError((error) =>{

    // 这里的正则表达式可以根据实际情况下js命名来进行修改,“ (\d)+  ”只匹配数字

    const pattern =/Loading chunk (\d)+ failed/g;

    const isChunkLoadFailed = error.message.match(pattern);

    const targetPath = router.history.pending.fullPath;

    if(isChunkLoadFailed) { 

         router.replace(targetPath);

     }

})