Laravel+Vue懒加载组件Chunk加载路径随子页面变化问题求助

嘿，我之前也碰到过这个一模一样的坑！问题根源就在你webpack配置里的publicPath设置——你用的是相对路径"public/"，这会让webpack根据当前页面的URL来拼接chunk的加载路径，所以当你在/auth/register这种嵌套路由页面时，路径就变成了/auth/public/js/chunks/register.js，自然找不到文件了。

给你几个可行的解决方案：

方案1：把publicPath改成绝对路径 #

直接在publicPath前面加上斜杠，让它变成根目录相对的绝对路径：

mix.webpackConfig({
  output: {
    publicPath: "/public/", // 关键：开头添加斜杠
    chunkFilename: mix.inProduction() ? "js/chunks/[name].[chunkhash].js" : "js/chunks/[name].js"
  },
});

这样webpack会强制从域名根目录开始查找chunk文件，不管你在哪个路由层级，都能正确加载到/public/js/chunks/xxx.js。

方案2：用Laravel Mix的setPublicPath统一配置 #

Laravel Mix本身提供了setPublicPath方法，用来指定资源的根目录，用这个方法可以避免手动配置webpack的publicPath时出错：

// 先设置Mix的公共路径
mix.setPublicPath('public');
// 再配置webpack的chunk文件名
mix.webpackConfig({
  output: {
    chunkFilename: mix.inProduction() ? "js/chunks/[name].[chunkhash].js" : "js/chunks/[name].js"
  },
});

Mix会自动帮你处理publicPath的绝对路径问题，不用再担心相对路径导致的路由层级问题。

方案3：针对子目录部署的情况 #

如果你的项目部署在域名的子目录下（比如http://projecturl/myapp/），那就要把publicPath设为对应的完整绝对路径：

mix.webpackConfig({
  output: {
    publicPath: "/myapp/public/", // 替换成你的实际子目录路径
    chunkFilename: mix.inProduction() ? "js/chunks/[name].[chunkhash].js" : "js/chunks/[name].js"
  },
});

原理其实很简单：相对路径的publicPath会让webpack生成相对于当前页面URL的chunk地址，而绝对路径会固定从域名根目录开始解析，这样不管你在哪个路由页面，chunk的加载路径都是正确的。

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