Laravel Mix 生成JS文件路径错误（Concrete CMS主题开发场景）

问题分析 #

你的webpack.mix.js配置中，JS输出路径使用了绝对路径前缀（/js/main.js），而CSS使用的是相对路径（css/main.css）。Laravel Mix的setPublicPath已经指定了公共输出目录，当你给js()方法的输出路径加开头斜杠时，Mix会将这个绝对路径与publicDir直接拼接，导致路径重复叠加；而相对路径会自动在publicDir基础上追加，所以CSS输出正常。

修复方案 #

修改webpack.mix.js中js()方法的输出路径，去掉开头的斜杠：

var publicDir = '/Applications/MAMP/htdocs/dlm/application/themes/flintstone';
mix.setPublicPath(publicDir);

mix
    .sass('assets/scss/main.scss', 'css/main.css')
    .js('assets/js/main.js', 'js/main.js'); // 去掉开头的斜杠

原理说明 #

Laravel Mix对输出路径的处理逻辑：

• 相对路径（如js/main.js）：会自动拼接在setPublicPath指定的目录之后，最终路径为publicDir + /js/main.js
• 绝对路径（如/js/main.js）：会被当作完整路径的一部分，直接与publicDir拼接，导致出现重复叠加的错误路径结构

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