Laravel Mix加载Webpack Chunk文件路径错误问题求助

算力阿峰

2026-5-7

解决Laravel Mix中Chunk文件加载路径错误的问题

我来帮你搞定这个Chunk路径加载的问题——之前做管理面板定制的时候也踩过类似的坑，核心是要让Webpack和Laravel Mix的路径配置完全对齐，才能让Chunk文件的引用路径生效。

问题根源

你已经正确设置了setPublicPath和setResourceRoot，也指定了Chunk的输出目录，但页面加载时还是走默认路径，这是因为Webpack的output.publicPath优先级需要明确配置，同时要和Mix的资源根路径保持一致，避免路径拼接时出现遗漏。

具体解决方案

1. 统一配置Webpack的`output.publicPath`

修改你的Mix配置，在Webpack配置里明确添加publicPath，并且确保和setResourceRoot的路径末尾带斜杠（避免路径拼接出错）：

mix.setPublicPath('public/admin')
   .setResourceRoot('/admin/') // 末尾加斜杠，防止路径拼接成/adminjs这类错误格式
   .webpackConfig({
     output: {
       chunkFilename: 'js/chunks/[name].js',
       publicPath: '/admin/' // 明确指定Chunk加载的根路径
     }
   });

这个配置会告诉Webpack，所有动态加载的Chunk文件，都要从/admin/这个根路径下去请求。

2. 检查模板中的资源引用方式

在管理面板的模板文件里，一定要用Mix的mix()函数并指定第二个参数（对应你的public子目录）来引用主JS文件：

<script src="{{ mix('js/app.js', 'admin') }}"></script>

这里的第二个参数'admin'会让Mix自动读取public/admin目录下的mix-manifest.json，确保Chunk的引用路径和主文件关联正确。

3. 清除缓存并重新编译

旧的mix-manifest.json缓存可能会导致路径不生效，先删除旧的manifest文件再重新构建：

rm -rf public/admin/mix-manifest.json
npm run dev # 生产环境用 npm run production

重新编译后，Mix会生成全新的manifest文件，里面的Chunk路径会正确关联/admin/根目录。

4. 验证manifest文件

编译完成后，打开public/admin/mix-manifest.json，检查Chunk的路径配置是否正确，正常应该类似这样：

{
  "/js/app.js": "/js/app.js",
  "/js/chunks/dashboard.js": "/js/chunks/dashboard.js"
}

结合我们设置的publicPath: '/admin/'，页面加载时就会自动拼接成/admin/js/chunks/dashboard.js，刚好匹配你的Chunk输出目录。

按照这几步操作后，应该就能解决Chunk路径加载错误的问题了。

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