LaravelでVite manifest not found at が出る原因と対策

Laravel Viteの使い方とエラー対策

Laravelのログイン画面を表示しようとしたときに「Vite manifest not found at」とエラーがでた場合の原因と対策を解説します。

LaravelでVite manifest not found at が出る原因

まず原因について。

Laravelでは、2022年6月末から、Laravel Mixに代わってLaravel Viteが使われるようになりました。

Laravel MixもLaravel Viteも、Vue.jsやTailwind CSS等の変更をブラウザに反映する役割を果たします。

詳しくは、こちらをご覧ください。

Laravel Viteの場合は、npm run devコマンドを実行すると、Laravel Viteが起動します。

その時にログイン画面を表示すると、Tailwind CSSのスタイルが変換され、きちんとした画面が表示されます。

ただnpm run devコマンドを止めてしまうと、Viteを止めてしまうので、スタイルが反映されません。

このようにnpm run devが実行されていない場合には、Viteはpublic/build以下のファイルを参考にブラウザに画像を表示しようとします。

ですが必要なファイルが見つからない時、エラーになってしまいます。

LaravelでVite manifest not found at が出るときの対策

ではどうしたら良いか。対策は2つあります。

  1. npm run devを実行したままにしておく
  2. npm run buildを実行する

解説していきますね。

1つ目は、プロジェクト開発中は、npm run dev コマンドを実行しておくこと。

コマンドプロンプトツールなどを別途起動して、npm run devを実行したままにしておきましょう。

2つ目の方法は、npm run buildを実行すること。

Laravel Viteを使っている場合は、Vue.jsやTailwind CSSを本番環境で反映させるには、npm run buildを実行します。

これによって、public/build/の中に、manifest.jsonファイルができます。またpublic/build/assets の中にcssとjsファイルができます。

この状態になっていれば、npm run devを実行していない時には、Vite側で、manifest.jsonファイルの情報を元に、public/build/assetsのファイルを参照してくれます。

ブラウザでソースを確認してみると、ファイルの読み込み部分が変化して、public/build/assetsの中のファイルを読み込んでいるのが分かります。

【npm run build実行後】

さいごに

以上、LaravelでVite manifest not found at が出る原因と対策について解説しました。

あなたのエラーが解決すると嬉しいです。

Laravel Viteの使い方やエラー対策は下記ページで色々と紹介しているので、併せて参考にしてください。

Laravel Viteの使い方とエラー対策 Laravel・PHP豆知識・トラブル対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

社内にWebアプリ開発経験がなくて、困ってませんか?

「自社でWebアプリ開発を始めていきたい」
という企業様のために、Laravelセミナー・プログラミング教育を実施しています。

【セミナー使用スライド】

詳細はこちらご覧ください

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました