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

Question

我目前有一个使用 Webpack 5.43 构建的 Wordpress + VueJS 3 项目。在生产环境中，当部署新版本并且网站访问者已经打开了一个选项卡时，当在我的 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 缓存时，为什么会在生产环境中发生这种情况。

有人遇到同样的错误并可以提供解决方案吗？

提前致谢 ：）

Answer 1

你需要让你的index.html和入口点文件永远不会被缓存，这可以使用缓存控制头（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