mix 无法编译 blade 内联 js/css，因其仅处理独立文件；必须将内联代码抽离为 resources/js/ 或 resources/css/ 下的源文件，并通过 mix.js() 或 mix.postcss() 显式编译，blade 中引用须用 {{ mix() }} 辅助函数。
mix.js() 和 mix.postCss() 不能编译 Blade 模板里的内联 JS/CSS —— 它们只处理独立文件。Blade 是 PHP 服务端渲染模板，内联代码在运行时才拼接，根本不会被 Mix 触及。
想让内联 JS/CSS 也走编译流程，得把它们抽出来，变成可被 Mix 管理的源文件。
内联 JS 必须抽成独立 .js 文件再编译
常见错误是直接在 Blade 里写 <script>console.log(Vue);</script>，指望 Mix 自动处理 Vue 或其他模块。这行不通：Mix 不解析 HTML/Blade 内容，Vue 变量在浏览器里就是 undefined。
- 正确做法：把逻辑移到
resources/js/pages/dashboard.js这类文件里，用mix.js('resources/js/pages/dashboard.js', 'public/js')显式编译 - 如果只是小段初始化代码（比如传参），用
window.Laravel = @json($data)注入数据，再由外部 JS 消费，避免重复打包 - 别在
<script></script>标签里写 ES6 模块语法（import/export）—— 浏览器不认，也不经过 Babel 转译
内联 CSS 优先走 PostCSS 链，而非
Blade 中的 <style>.card { @apply bg-gray-50; }</style> 会被浏览器原样执行，但 @apply 是 Tailwind 的 PostCSS 功能，仅在 mix.postCss() 流程中生效。
- 必须把这类样式挪到
resources/css/components/card.css，然后在mix.postCss()的输入数组里包含它 - 如果真要动态生成样式（如主题色），用 CSS 变量 + JS 控制，而不是拼
<style></style>字符串 —— 后者无法压缩、无缓存、难调试 -
mix.sass()或mix.less()编译的文件，同样不支持在 Blade<style></style>里直接写 SCSS 语法
Blade 中引用编译后资源，必须用 mix() 辅助函数
很多人写 <script src="/js/app.js"></script>，开发时能跑，上线就 404 —— 因为生产环境开了 mix.version()，文件名带哈希，且依赖 mix-manifest.json 映射。
- 永远用
{{ mix('js/app.js') }}，它会查 manifest 并返回真实路径，比如/js/app.js?id=abc123 - 确保
public/mix-manifest.json随静态文件一起部署，CI/CD 脚本漏掉它，所有mix()调用都返回空字符串 - 不要给
mix()传绝对路径（如/public/js/app.js），它只接受相对于public/的路径
最易忽略的点：Mix 编译的是「文件」，不是「字符串」；Blade 渲染的是「HTML 输出」。两者生命周期完全分离。想让内联内容享受编译能力，唯一可靠的方式是提前把它变成文件 —— 别试图在模板里绕过构建流程。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
