本文详解 Laravel 9 集成 Vite 后如何正确声明、打包并安全引用 resources/images/ 下的静态图片（如 favicon），解决 Unable to locate file in Vite manifest 常见错误。

本文详解 laravel 9 集成 vite 后如何正确声明、打包并安全引用 `resources/images/` 下的静态图片（如 favicon），解决 `unable to locate file in vite manifest` 常见错误。

在 Laravel 9 中，Vite 默认不会自动扫描或打包 resources/images/ 目录下的文件，即使你已在 Blade 模板中调用 Vite::asset()，若该资源未被 Vite 显式纳入构建流程，就会触发 Unable to locate file in Vite manifest 错误。这不是配置遗漏，而是 Vite 的按需导入机制决定的——必须通过 import.meta.glob() 主动声明资源路径，才能生成对应的 manifest 条目。

✅ 正确操作步骤

1. 在 resources/js/app.js 中显式声明图片入口
   添加 glob 模式，确保 Vite 在构建时读取并打包所有指定图片：

   // resources/js/app.js
   import.meta.glob([
     '../images/**',
     // 可选：同时支持其他静态资源
     '../fonts/**',
     '../svg/**'
   ]);

   ⚠️ 注意路径为相对于 app.js 的相对路径：../images/ 对应 resources/images/（因 app.js 位于 resources/js/）。

2. 确认 Vite 门面已正确注册
   检查 config/app.php 中是否已注册 Vite 门面别名（Laravel 9 默认已包含，但自定义配置后可能被移除）：

   // config/app.php → 'aliases' 数组内
   'Vite' => Illuminate\Support\Facades\Vite::class,

   若缺失，请手动添加；修改后建议清除配置缓存：php artisan config:clear。

   

   Laravel Cloud

   Laravel Cloud（cloud.laravel.com）。此技能用于处理所有 Laravel Cloud 请求，包括搜索和读取数据。只要任务涉及 Laravel Cloud，即使用此技能。

   下载

3. 在 Blade 中使用 Vite::asset() 安全引用
   路径参数必须以 resources/ 开头，且与实际文件位置一致：

   <!-- resources/views/master.blade.php -->
   <link rel="icon" type="image/png" href="{{ Vite::asset('resources/images/favicon.png') }}">
   <img src="{{ Vite::asset('resources/images/logo.svg') }}" alt="Logo">

   ✅ 此方式会自动注入版本哈希（如 favicon.a1b2c3d4.png），并确保开发/生产环境路径一致。

? 常见误区与验证技巧

• ❌ 错误写法：Vite::asset('images/favicon.png') —— 缺少 resources/ 前缀，Vite 将无法匹配 manifest；
• ❌ 忘记重启开发服务器：修改 app.js 后需重启 npm run dev，否则新 glob 不生效；
• ✅ 快速验证：构建完成后检查 bootstrap/cache/vite-manifest.json，确认是否存在类似 "resources/images/favicon.png" 的键；
• ? 进阶提示：如仅需单个图片，也可直接在 JS 中 import（适用于动态场景）：

  import favicon from '../images/favicon.png';
  document.querySelector('link[rel="icon"]').href = favicon;

遵循以上三步，即可彻底解决 Vite 图片打包失败问题，实现 favicon、logo 等静态资源的可靠加载与缓存控制。