WebpackChunkName路径问题：Vue+Inertia.js应用分块文件加载错误

这个问题的核心是Webpack默认会从服务器根目录加载chunk文件，而你的应用部署在子文件夹/myVueApp/里，所以需要调整Webpack的publicPath配置来修正资源加载路径。

最佳解决方案：设置相对路径的publicPath #

打开你的myVueApp/webpack.config.js，找到output配置块，添加publicPath: './'：

module.exports = {
  // ... 其他已有的Webpack配置
  output: {
    // 你现有的输出配置（比如filename、path）
    filename: '[name].js',
    path: path.resolve(__dirname, 'includes/js'),
    // 添加这一行，指定资源加载的相对路径
    publicPath: './'
  },
  // ... 其他配置（resolve、module规则等）
}

为什么这个设置有效？

• Webpack的output.publicPath决定了所有构建后资源（包括chunk文件）的基础URL。默认值是/（服务器根目录），所以你的runtime.js会从/includes/js/pages/请求chunk。
• 设置为./后，Webpack会以当前执行脚本（runtime.js）的URL为基准加载chunk。你的runtime.js在/myVueApp/includes/js/，所以相对路径./pages/xxx.js会被解析为/myVueApp/includes/js/pages/xxx.js，正好匹配构建后的文件位置。

备选方案：使用服务器根相对路径 #

如果你希望明确指定子文件夹路径（比如固定部署在/myVueApp/），也可以设置绝对URL路径（注意这是服务器端的URL路径，和本地操作系统无关，跨Windows/Linux服务器都能正常工作）：

publicPath: '/myVueApp/includes/js/'

这个设置会直接告诉Webpack，所有资源都从/myVueApp/includes/js/这个路径加载，同样能解决问题。

验证效果 #

修改配置后，重新执行构建命令（比如npm run build），部署后打开浏览器开发者工具的网络面板，查看chunk文件的请求URL，应该已经指向/myVueApp/includes/js/pages/下的文件了。

内容的提问来源于stack exchange，提问作者codeShredd