Laravel Viteでnpm run buildを行っても、レイアウトが崩れたまま、Tailwind CSS等の変更が反映されない場合があります。
この場合、npm run devを止めた状態で、publicディレクトリの中に「hot」ファイルが残っていないか確認してください。
もし残っていたら、これを手動で削除します。
以上が解決法です。詳しく知りたい場合は、この先読んでくださいね。
Laravel Viteでnpm run buildを行っても変更が反映されない原因
Laravel Viteでは、npm run devを行うと、Viteサーバーが起動し、Tailwind CSSやVue.js等の変更をブラウザ側に即座に反映してくれます。
npm run devを実行中は、publicディレクトリの中にhotファイルができます。
このhotファイルは、npm run devを停止すると自動で削除されます。
ところが、node.jsのバージョンが古すぎたりすると、hotファイルが自動で消えず残っていたりします。
この状態でnpm run buildを実行すると、public/buildの中に本番環境用のファイルが作成され、さらにhotファイルも残った状態になります。
Viteとしては、hotファイルに書かれたViteサーバー情報をもとにViteサーバからcssを読み込もうとするものの、Viteが起動していないのでちゃんと反映されない！！という困った事態に陥ります。
そのため、こんな画面になってしまうのです。
このとき、chromeの検証ツールのコンソールを表示させていたら、下図のように、cssファイルやjsファイルが、Viteサーバーから読み込めないというエラーが発生しているのがわかります。
【Failed to load resource: net::ERR_CONNECTION_REFUSEDエラー発生】
Laravel Viteでnpm run buildを行っても変更が反映されない時の対策
ではどうしたら良いのか。
冒頭でお伝えしたとおり、hotファイルを削除してしまうのが手っ取り早い解決方法です。
ですが毎回行うのは面倒ですよね。
なぜこうなってしまう原因ですが、node.jsのバージョンが古すぎることが原因の場合があります。
node.jsのバージョンをチェックして、もし古すぎるようでしたら、公式サイトから新しいファイルをダウンロードしてnode.jsを更新しておきましょう。
ダウンロードしたファイルをダブルクリックして、インストールを進めてください。
なお2022年7月15日現在、推奨版は16.16.0となっています。
わたしのほうで検証していますが、バージョン12では、本件の問題が発生していましたが、バージョン16にしたところ、問題が解消しました。
HTTP通信が原因のことも
ご利用の環境によって、本体はHTTPS通信で送信されるのに、CSSやJavaScriptファイルはHTTP通信で送信されるために、スタイルが崩れることもあります。
下記記事を参考にしてください。
さいごに
以上、Laravel Viteのエラー時の対策でした。
わたしはLaravel学習サイトを運営していますが、Laravel Viteになってから、色々と質問を頂くようになりました。
正直、システムが変わる時って色々と面倒ではありますが＾＾；ただ、Viteに代わったことでさらにLaravelが使いやすくなっていくと思っています。
Laravel Viteのエラー対策や使い方は、他の記事・動画でも解説しています。下記ページにまとめてあるので、併せて参考にしてくださいね。
