LaravelMix怎么用_LaravelMix前端编译【教程】-php教程-PHP中文网

laravel mix 路径配置必须严格遵循规则：mix.js() 和 mix.postcss() 的源路径须为项目根目录下相对路径（不加 ./ 或绝对路径），输出目录必须位于 public/ 下；manifest 文件仅在 production 模式生成且需随部署上传，否则 mix() 辅助函数将失效导致 404。

laravelmix怎么用_laravelmix前端编译【教程】

直接能跑通，但 90% 的人卡在路径、输出位置和部署环节。

mix.js() 和 mix.postCss() 的路径必须写对

这两个方法的第一个参数是源文件路径，第二个是输出目录（不是完整文件名），且都必须基于项目根目录的相对路径 —— 不能用 ./ 开头，也不能用绝对路径。

mix.js('resources/js/app.js', 'public/js') ✅ 正确：源文件存在，输出目录为 public/js/
mix.js('js/app.js', 'js/') ❌ 错误：源路径找不到，输出目录没落在 public/ 下，Blade 中 <script src="/js/app.js"></script> 会 404
mix.postCss('resources/css/app.css', 'public/css', []) ✅ 支持 PostCSS 插件链，比如 tailwindcss 必须放在这里加载，不能只靠 @tailwind 指令

开发时正常、上线后全部 404 的原因

最常见就是 mix-manifest.json 没生成或没传上去，而 Blade 中用了 {{ mix('js/app.js') }} 这个指令依赖它。

laravel-specialist

精通 Laravel 10+，遵循现代 PHP 实践的 Laravel 专家。擅长优雅语法、Eloquent ORM、队列系统及企业级特性...

下载

没运行 npm run production：开发用 npm run dev 不生成 manifest，只有 production 模式才写入 public/mix-manifest.json
CI/CD 漏传 public/mix-manifest.json：这个文件不在 .gitignore 里，但很多部署脚本默认跳过 public/ 下非源码文件
mix.setPublicPath('dist') 后没同步改 Nginx 配置：Blade 仍按 /js/app.js 请求，但文件实际输出到了 dist/js/app.js，Nginx 找不到

条件编译模块 JS 时别硬编码路径

多个功能模块共存时，想按需开启编译，不要在 webpack.mix.js 里写一堆 if (process.env.MODULE1 === 'true') {}。Node.js 原生支持 JSON 加载，更干净。

在项目根目录放 module_statuses.json：
```
{"analytics": true,"chat": false}
```
在 webpack.mix.js 中：const status = require('./module_statuses.json');，然后：if (status.analytics) { mix.js('Modules/Analytics/js/index.js', 'public/js'); }
⚠️ 注意：require() 自动解析 JSON，但文件名不能以 _ 或 . 开头，否则要改用 fs.readFileSync + JSON.parse

不要用 mix.webpackConfig() 覆盖全部配置

这个方法容易把 Laravel Mix 内置的 loader、plugin、resolve 规则全干掉，导致 mix.js() 失效或 CSS 无法处理 @import。真要扩展，优先用 mix.extend() 或链式调用已有方法（如 .options()、.webpackConfig({ module: { rules: [...] } }) 中只补 rule）。

真正难的不是写几行 mix.js()，而是理解它背后那层 webpack 的约束边界 —— 路径从哪来、文件往哪去、manifest 怎么生效、服务器怎么找得到。漏掉任意一环，就只剩 404。