必须用 npm run watch（mix）或 npm run dev（vite），因 dev/watch/build 语义不同：watch 持续监听编译，dev 在 vite 中即热更新，在 mix 中仅为单次构建，build 仅 vite 专用且需 @vite 配合。
在 Laravel 项目中执行前端资源构建时，用错 npm 命令会导致 CSS 不更新、页面白屏、HMR 失效或生产环境样式错乱——这些都不是缓存问题，而是命令语义和输出路径完全不匹配造成的。
区分 dev/watch/build 的本质作用
npm run dev 编译一次，输出到 public/css（或 public/build），不监听文件变化，适合 CI 构建或快速验证单次结果。
npm run watch 持续监听 resources/assets/sass/ 或 resources/js/ 下的文件变动，自动重新编译并刷新浏览器（需配合 Laravel Mix 的 browserSync 或 Vite HMR），【开发时必须用这个，不是 dev】。
npm run build 是 Vite 专用命令，仅在使用 vite.config.js + laravel-vite-plugin 时有效；它会生成带哈希的文件名和 manifest.json，输出到 public/build；Laravel 的 @vite 指令依赖此结构，【mix 项目不能用 build，会报错】。
判断当前项目用的是 Mix 还是 Vite
打开项目根目录的 package.json，检查 scripts 字段：
若含 "dev": "npm run development" 或 "dev": "mix" 或 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" → 属于 Laravel Mix 体系。
若含 "dev": "vite" 和 "build": "vite build"，且已安装 vite 和 laravel-vite-plugin → 属于 Vite 体系。
注意：Mix 和 Vite 不能混用。package.json 里同时存在 mix 和 vite 脚本，说明项目处于迁移中途，必须先统一工具链再执行任何构建命令。
正确执行构建命令的操作路径
第一步：确认 .env 中 APP_DEBUG=true 且 APP_ENV=local（Vite HMR 和 Mix 的 source map 依赖此）。
第二步：进入项目根目录，运行 npm install（确保 node_modules 完整，尤其 laravel-mix 或 vite 及其插件已安装）。
第三步：根据工具链选择对应命令：
→ Mix 项目：终端执行 npm run watch（不是 dev），等待出现 [webpack.Progress] 100% 和 Compiled successfully 消息；此时修改 app.scss，保存后几秒内浏览器自动刷新并应用新样式。
→ Vite 项目：终端执行 npm run dev（Vite 的 dev 就是 watch），确保终端显示 Local: http://localhost:5173 并保持运行；Blade 中 @vite(['resources/js/app.js']) 才能注入热更新脚本。
第四步：验证 public 目录输出：
• Mix 项目检查 public/css/app.css 是否更新时间戳；
• Vite 项目检查 public/build/ 下是否有 assets/ 子目录及 manifest.json 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
