Laravel9 でLaravel BreezeでCSSが効いてない

Laravel Breezeのインストール時のメモ

ViteのCSSが適用されない

前提

MIXを使っている訳ではない。

BreezeをインストールしたらLogin画面でCSSが効いてない。（LaravelのLogo画像が巨大化）

解決策（結論）

vite.config.jsを修正する

server:

​ host=’IPアドレス　V4形式で指定して

を追加して「npm run dev」を実行

vite.config.jsサンプル：

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

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '192.168.0.xxx',
  },
  plugins:[
    vue(),
    laravel({
        input: [
            'resources/css/app.css',
            'resources/js/app.js',
        ],
    
        refresh: true,
    })
]
})

※上記例はvueも使えるようになってます。

原因

FireFoxの開発ツールで見てみると、IPV6の形式になっている。以下

GEThttp://[::1]:5173/@vite/client
GEThttp://[::1]:5173/resources/css/app.css
GEThttp://[::1]:5173/resources/js/app.js

なので、vite.config.jsを修正して　npm run dev でサーバーを再起動し、同様にFireFoxでソースを確認（画面はもうCSSがあたっているが）

GEThttp://192.168.0.XXX:5173/@vite/client
GEThttp://192.168.0.XXX:5173/resources/js/app.js
GEThttp://192.168.0.XXX:5173/resources/css/app.css
GEThttp://192.168.0.XXX:5173/resources/js/bootstrap.js

※「XXX」は実際のIPアドレスの第4オクテットってやつです。

⇒画面はCSSがあたった状態正しいと思われる状態になりました。

途中経過

vite.config.jsの server: {
host: '192.168.0.xxx',
},

ここを”0.0.0.0”にとするサイトもありましたが、FireFoxの開発ツールでみるとソース上はIPV4形式でポート5173を見に行くソースにはなっているが当然、リンク先のCSSファイル取得できず。

CSSが読み込まれない現象は解消されません。

（⇒勉強不足ですが理屈ではなく、実をとってこれで解決。それでいいのか？）

尚、IPV4の第４オクテットに指定したIPは当該のマシンに振ってある固定IPと同様のIPを振っています。下記画像は、「npm run dev」した際の応答結果です。
黒消ししていますが第4オクテットは当該マシンの固定IP5137ポートです。
一方「→APP＿URL：http://192.168.0.XX”」はなぜか、当該マシンのIPアドレスの第四オクテットの数字+1で起動しています。（理由は不明です。）

取り敢えず今回はここまで
2023/02/23