我目前拥有一个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缓存的分块文件上线环境中会发生此错误。
遇到相同错误并能够提供解决方案的人,请帮忙。
谢谢! :)