加载块失败：ChunkLoadError（VueJS + Webpack）

Question

我目前拥有一个Wordpress + VueJS 3项目，使用Webpack 5.43进行构建。在生产环境中，当部署了新版本且网站访客已经打开标签页时，在我的Vue SPA内触发导航时，总是会出现以下错误（或类似错误）：

ChunkLoadError: Loading chunk 7567 failed.
(error: http://loc.site.com/wp-content/themes/my-theme/dist/main/2b26538361c74a8bb15f.js)
    at Object.o.f.j (main.fb8c71b3372ca9169338.js:2)
    at main.fb8c71b3372ca9169338.js:2
    at Array.reduce (<anonymous>)
    at Function.o.e (main.fb8c71b3372ca9169338.js:2)
    at component (main.fb8c71b3372ca9169338.js:2)
    at be (main.fb8c71b3372ca9169338.js:2)
    at main.fb8c71b3372ca9169338.js:2

出现这种情况是因为当前已经打开的会话正在请求我的生产代码的旧版本，而该版本已经不存在。错误出现后，我的SPA导航变得有些奇怪，某些路由链接无法正常工作。

我当前的webpack输出构建如下所示：

...,
output: {
    filename: (chunkData) => {
        return chunkData.chunk.name === 'main' ? '[name]/[name].[hash].js': '[name]/[name].js';
    },
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/wp-content/themes/my-theme/dist/',
    chunkFilename: 'main/[chunkhash].js',
},
...,

我尝试更改分块文件名以修复此错误，但目前还无法解决。 将继续调查并提供任何更新（如果有的话）。 除了潜在的错误修复之外，最大的问题是为什么在通过Cloudflare缓存的分块文件上线环境中会发生此错误。

遇到相同错误并能够提供解决方案的人，请帮忙。

谢谢！ :)

- Senate No. 7

---

请查看此链接 https://dev59.com/j8Pra4cB1Zd3GeqPo8_L#74144190。 - Nestor Oropel

Answer 1

您需要确保您的index.html和入口文件(entrypoint)不被缓存，可以使用cache-control头信息(Cache-Control - HTTP)来实现。 为了解决这个问题，我将Nginx配置更改如下：

location ~* \.html?$ {
    expires -1;
    add_header Pragma "no-cache";
    add_header Cache-Control "no-store, must-revalidate";
  }

更多细节请参考这篇文章，解释了为什么会出现这种情况：https://blog.francium.tech/vue-lazy-routes-loading-chunk-failed-9ee407bbd58

- Amr Omar

Answer 2

我通过在Chrome中禁用缓存来解决了这个问题。右键单击页面，然后检查，在网络选项卡中，勾选禁用缓存。这个问题的原因是Chrome缓存了旧的Vue组件而不是渲染更新后的Vue组件。强制刷新和清除历史记录或存储缓存都无效。

- ATG