laravel中css哈希路径需匹配构建工具：mix用mix()函数读取mix-manifest.json，vite用@vite指令自动注入哈希路径；混用或误用asset()会导致404，切换工具后须清理对应缓存目录。
在 Laravel 项目中，当 CSS 文件名被自动加上哈希（如 app.css?id=9f3a1b 或 app.abc123.css），直接用 asset() 引用原始路径会导致 404 错误——因为真实文件名已变，浏览器找不到旧路径。
确认你用的是 Mix 还是 Vite
哈希生成机制取决于前端构建工具，引用方式必须严格匹配：
→ 如果项目是 Laravel 9+ 新建，默认用 【Vite】；老项目或手动配置过 webpack.mix.js 的，大概率还在用 【Mix】。
混用 @vite 和 mix() 会导致资源加载失败，且无报错提示，只会静默跳过 CSS。
使用 Laravel Mix 时引用带哈希的 CSS
方法一：用 mix() 辅助函数（唯一正确方式）
1. 确保 webpack.mix.js 文件末尾有 .version() 调用，例如：
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
2. 运行 npm run production 编译，生成 public/mix-manifest.json 文件，其中记录了哈希映射关系。
3. 在 Blade 模板中写：<link href="%7B%7B%20mix('css/app.css')%20%7D%7D" rel="stylesheet">
【注意】mix() 函数会读取 mix-manifest.json，自动替换为当前哈希路径；asset() 不会查表，永远返回原始路径，绝对不能在这里用。
使用 Vite 时引用带哈希的 CSS
Vite 的哈希路径不走 manifest 文件，而是由 @vite 指令动态注入：
第一步：确保 vite.config.js 中 input 数组包含你的 CSS 入口，例如：
input: ['resources/css/app.css', 'resources/js/app.js']
第二步：运行 npm run build 后，检查 public/build/ 下是否生成了带哈希名的 CSS 文件（如 assets/app-C5F3E2D1.css）。
第三步：在主布局 Blade 文件的
中，用 @vite 指令一次性注入所有资源：@vite(['resources/css/app.css', 'resources/js/app.js'])
这行代码会自动展开为带完整哈希路径的 和 <script> 标签，并启用 HMR 开发支持。</script>
⚠️ 不要拆开写多个 @vite，也不要尝试用 asset() 或 mix() 引入 Vite 构建产物——public/build/ 下的文件没有 manifest 映射，asset() 无法识别哈希名。
清理残留缓存避免引用错文件
切换构建工具后，必须手动删除旧产物目录：
→ 删除 public/mix-manifest.json（Mix 专用）
→ 删除整个 public/build/ 目录（Vite 专用）
否则浏览器可能加载到旧哈希路径的缓存文件，而服务器上该文件已被新构建覆盖或删除，导致样式丢失且难以定位原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
