Laravel怎么加载静态资源_Laravel使用Vite编译CSS和JS【技巧】

vite build后css/js未生效，因laravel默认沿用mix()逻辑，而Vite产物路径、哈希管理及html注入方式不同；需改用@vite指令并确保模板位置、入口配置与vite.config.js严格匹配。

为什么 vite build 后 CSS/JS 没生效？

因为 Laravel 默认仍走传统的 mix() 资源函数逻辑，而 Vite 编译产物路径、版本控制、HTML 注入方式完全不同——不改模板和配置，浏览器根本找不到新文件。

• 检查 Blade 模板里是否还留着 @vitereactRefresh 或旧的 mix() 调用，二者不能混用
• @vite 必须放在 里（CSS）和 前（JS），否则资源加载顺序错乱
• Vite 开发服务器默认只监听 resources/js 和 resources/css，放错目录（比如写成 assets/）会导致热更新失效

@vite 在 Blade 中怎么写才不出错？

它不是简单替换 mix() 的标签，而是会自动注入开发时的 HMR 脚本或构建后的带哈希的资源链接——前提是项目结构和 vite.config.js 对得上。

• 开发环境：@vite(['resources/css/app.css', 'resources/js/app.js']) 会注入 和 HMR 客户端
• 生产环境：vite build 后，同一行会生成带完整哈希的 和
• 不要手动拼接路径，比如 @vite('build/assets/app.123abc.css') —— 这样会绕过 Vite 的哈希管理和入口依赖分析

public 目录下静态文件（如图片、字体）怎么引用？

Vite 不处理 public/ 下的文件，但 Laravel 的 asset() 函数依然可用；关键在于区分“由 Vite 打包的资源”和“直接丢进 public 的静态文件”。

• 图片、svg、字体等若需被 CSS/JS 引用并参与构建（比如 CSS 里的 background: url('@/images/logo.svg')），必须放在 resources/ 下，用相对路径或别名导入
• 如果只是 HTML 中直接 ，那就老老实实扔进 public/images/，Vite 完全不干涉
• 注意：Vite 的 public/ 是开发时的静态服务根目录，和 Laravel 的 public/ 是两个东西，别搞混

升级到 Laravel 11+ 后 @vite 报错找不到入口？

Laravel 11 默认移除了 vite.config.js 的自动创建逻辑，且要求入口文件名严格匹配 resources/js/app.js 和 resources/css/app.css，否则 @vite 无法推导出构建产物位置。

立即学习“前端免费学习笔记（深入）”；

• 确认 vite.config.js 中 build.rollupOptions.input 是否显式指定了入口，例如：input: { app: './resources/js/app.js' }
• 如果用了多入口（如后台 admin.js），@vite(['resources/js/app.js', 'resources/js/admin.js']) 必须一一对应，漏一个就会导致部分 JS 不加载
• 清掉 bootstrap/cache/config.php 和 storage/framework/views/ 缓存，Blade 编译缓存有时会卡住旧的 Vite manifest 解析逻辑

Vite 和 Laravel 的衔接点其实就卡在三处：Blade 标签行为、资源路径约定、构建产物映射。很多人调半天发现是 vite.config.js 里改了 build.outDir 却没同步更新 Laravel 的 manifest 解析逻辑——这种细节不报错，但资源就是 404。