Laravel + vite初心者向け。npm run dev解除時の画面崩れを防ぐ方法
155 回閲覧されました
みなさんこんにちは、jonioです。
今回はLaravelにviteを使った時に「npm run dev」を解除すると画面崩れが起きた時の対処法です。
フロントにVue.jsやNext.jsなどを使っている時に起きると思います。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
画面崩れの原因
「npm run dev」をしている時はviteがあることで記述したJavaScriptやCSSを使用できる状態に変換せずに適用されてブラウザの画面に表示されます。
「npm run dev」を解除するとJavaScriptやCSSが使用できる状態ではないので何も記述してない状態になり画面崩れが起きます。
だからJavaScriptやCSSが使用できる状態に変換しないといけません。
適用状態にする方法
「npm run build」をすればいいです。
これによりJavaScriptやCSSが使用できる状態になり「npm run dev」をしている時と同じ見た目になります。