みなさんこんにちは、あべいさぢです。

今回はLaravelにviteを使った時に「npm run dev」を解除すると画面崩れが起きた時の対処法です。

フロントにVue.jsやNext.jsなどを使っている時に起きると思います。

画面崩れの原因

「npm run dev」をしている時はviteがあることで記述したJavaScriptやCSSを使用できる状態に変換せずに適用されてブラウザの画面に表示されます。

「npm run dev」を解除するとJavaScriptやCSSが使用できる状態ではないので何も記述してない状態になり画面崩れが起きます。

だからJavaScriptやCSSが使用できる状態に変換しないといけません。

適用状態にする方法

「npm run build」をすればいいです。

これによりJavaScriptやCSSが使用できる状態になり「npm run dev」をしている時と同じ見た目になります。