Laravel+Viteのbuildで、画像ファイルやフォントファイルを正しくアセット化する方法

概要

Laravel+Viteの環境で本番環境用にJavaScriptやCSSをコンパイルする（npm run build）ときに、view（blade）にしか記載されていない画像ファイルがpublic/build/assetsフォルダに格納されず、本番環境の画面で正常に表示できない問題が発生します。
これを正しい方法で解決します。

問題の詳細

Viteのbuildの動き

ViteでJavaScriptやCSSをコンパイルするためにnpm run buildを実行すると、次のように動作します。

１．vite.config.jsを読んで、input:に記載されているSCSSやJSファイルをコンパイル対象として認識する。以下の例だと、'resources/sass/adminmain.scss'、'resources/sass/frontmain.scss'、・・・といった12個のファイルが対象とみなす。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/adminmain.scss',
                'resources/sass/frontmain.scss',
                'resources/sass/main.scss',
                'resources/sass/oneui/themes/amethyst.scss',
                'resources/sass/oneui/themes/city.scss',
                'resources/sass/oneui/themes/flat.scss',
                'resources/sass/oneui/themes/modern.scss',
                'resources/sass/oneui/themes/smooth.scss',
                'resources/js/oneui/app.js',
                'resources/js/admin.js',
                'resources/js/front.js',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        react(),
    ],
(後略)

２．各対象が必要とする（JavaScriptならimportしていたり、SCSSなら@importやbackground-image:url();で指定されていたり）ファイルをコンパイル対象に含めるためすべてのファイルの中身を確認する。
３．コンパイルした結果のJSファイルおよびCSSファイルと、必要となる画像ファイルをpublic/build/assetsフォルダにバージョン付名称で格納する。例えばresources/sass/adminmain.scssはpublic/build/assets/adminmain-ed6fcaf9.cssなどとなる。

bladeで使う画像の問題

blade内で画像ファイルを参照するときは、

*.blade.php

<img src="{{ Vite::asset('resources/images/toplogo.png') }}">

のように画像ファイルを使うのですが、この画像ファイルはJSやCSSで利用されるわけではないので、Viteのbuild実行のときに存在がわからないことになります。これにより、上記のresources/images/toplogo.pngはpublic/build/assetsフォルダに存在しないファイルとなってしまうので、以下のようにエラーが出てしまいます。

Unable to locate file in Vite manifest: resources/images/toplogo.png.

解決方法

この問題の解決方法は公式ページに明記されています。

Processing Static Assets With Vite

※ネット上を検索すると色々他の方法が見つかったりしますが、他の問題があったり記述方法に環境依存性が合ったりするので、公式記載の方法を採用すべきです。

JavaScriptにStaticアセットのフォルダを記載する

vite.config.jsに指定したコンパイル対象のJavaScriptのいずれかに、以下を追記します。

admin.js

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

これで、npm run build後も以下部分でのエラーはなくなります。

*.blade.php

<img src="{{ Vite::asset('resources/images/toplogo.png') }}">