Laravel ViteでCSSが効かない = [0.0.0.0:5173]が開かない問題の根本的な解決法

Viteを使っていて、npm run devで開発環境を立ち上げたときに、
CSSが効かない問題が発生します。

この問題は、ViteのURL()

http://0.0.0.0:5173/resources/js/app.js
http://0.0.0.0:5173/@vite/client
http://0.0.0.0:5173/resources/css/app.css

にアクセス出来ないために発生します。

ブラウザコンソールのエラー表示は以下のようになります。

[Error] Failed to load resource: ネットワーク接続が切れました。 (app.js, line 0)
[Error] Failed to load resource: ネットワーク接続が切れました。 (client, line 0)
[Error] Failed to load resource: ネットワーク接続が切れました。 (app.css, line 0)

解決法1

public/hot をエディタで編集し

http://0.0.0.0:5173
↓
http://localhost:5173

と書き換えると解決します。

この方法でも解決するのですが、hotはnpm run dev を実行するたびに0.0.0.0に戻るため、毎度書き換えの手作業が発生し、大変な時間泥棒になります。

根本的な解決法では、一度作業するだけで恒久的に解決されるので、のべ時間として見れば大変な費用対効果が得られます。

ダメだった解決法

vite.config.jsに以下の設定を追加します。

export default defineConfig({
    // 中略
    server: {
        host: 'localhost',
    },
});

public/hotのURLも書きかわり、一見良さそうですが、今度は
http://localhost:5173にアクセス出来ません。

根本的な解決法