Larave 和 Vite - Vite 清单缺少奇怪文件

Question

在此图像中，有 5 个单独的图像都位于同一文件夹中。当我运行时，npm run build会生成清单文件，但其中两个文件未输入（favicon-32x32|16x16）。

图像清晰呈现；

当它投入生产时，我收到以下 500 错误；

[2022-08-26 14:30:52] production.ERROR: Unable to locate file in Vite manifest: resources/images/favicon/favicon-32x32.png. {"view":{"view":"/home/forge/myproject/resources/views/app.blade.php","data":[]},"exception":"[object] (Spatie\\LaravelIgnition\\Exceptions\\ViewException(code: 0): Unable to locate file in Vite manifest: resources/images/favicon/favicon-32x32.png. at /home/forge/myproject/vendor/laravel/framework/src/Illuminate/Foundation/Vite.php:539)

是否有任何原因导致这些文件不会添加到清单中？

Answer 1

检查您的资产规模。几天前我遇到了一个问题，小于 4kb 的图像将通过 base64 内联。

正如 vite 文档中所述

小于 assetInlineLimit 选项的字节数资产将内联为 base64 数据 URL。

环境

build: { assetsInlineLimit: 0 }

将vite.config.js消除这种行为。

我发布了有关资产内联的问题。请参阅如何让 Laravel Vite 将版本化的静态资源复制到构建文件夹

此外，Vite 无法在 Blade 模板中找到资产，因此您需要告诉 Vite 您是否在 Blade 模板中使用 Vite::asset() 帮助程序来处理这些图像。这是通过在应用程序中的某处实现一些 JavaScript 来完成的。（当然文件需要经过Vite处理）

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

请参阅 Laravel 文档：https://laravel.com/docs/9.x/vite#blade-processing-static-assets

最后要检查的一件事是确保您npm run build在生产环境中运行，也可以通过执行以下操作来清除您的视图php artisan view:clear

顺便说一句，在撰写本文时，我遇到了 Blade 中使用的资源低于上述 base64 阈值的问题。到时候他们就没法工作了。目前，我将 assetInlineLimit 设置为 0 以跳过 Base64 内联。不过，我认为这是一个很好的功能，这个问题可能会在近期功能中得到解决。