vue.js - block 加载错误 : Loading chunk failed (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

发生这种情况是因为当前已经打开的 session 正在请求我的生产代码的旧版本，该版本不再存在。错误出现后，我的 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',
},
...,

我曾尝试更改 block 文件名以尝试修复此错误，但我目前还不能。将继续调查并提供任何更新(如果有)。除了此错误的潜在修复之外，最大的问题是当通过 Cloudflare 缓存 block 文件时，为什么它会在生产环境中发生。

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

提前致谢:)

Answer 1

您需要让您的 index.html 和入口点文件从不被缓存，这可以使用缓存控制 header (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