[Vite] 『WebSocket connection to '<ローカルIP>' failed』 無限リロード

Question

前提

Vue3 + JavaScript + Vuetify3 beta + Vite 環境
上記の構成でプロジェクトを作成しています。

コンパイル後<ローカルIP:3000>にアクセスした際、
『WebSocket connection to 'wss://<ローカルIP>:3000/' failed: 』
のエラーが起き、数秒ごとにページの再読み込みを行う状態です。

同現象について

ポピュラーなエラーのようで検索すると無限に情報が出てきます。
……が、結局解決していない場合も多くクリティカルな情報を見つけられていない状態です。

実現したいこと

HRMの停止、またはwebsocketの通信

発生している問題・エラーメッセージ

ブラウザ上にて以下のループ

[vite] connecting...
WebSocket connection to 'ws://<ローカルIP>:3000/' failed: 
[vite] server connection lost. polling for restart...

該当のソースコード

・vite.config.js

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

const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
        vuetify({
            autoImport: true,
        }),
    ],
    server: {
        host: true,
    },
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },

試したこと

参考にしたURLを記載します。

・Viteでブラウザが再読込が繰り返す問題を解決

※環境は違いますが詳しい説明が記載してあります。
https://diary.varwww.com/posts/2021/vite-unexpected-reload-loop.html

・Docker環境でvite+Nginxを動作させた時に詰まったポイント

※環境は違いますが発生している現象は同じです。
URL: https://qiita.com/tomopict/items/2c321374e917cc679efb

・公式ドキュメント

server.hmr の項目でHMRの無効について記載がありますが、
hmr: false でも hmr{ overlay: false }でも無効にできなかったため諦めています。
URL: https://vitejs.dev/config/#server-force

・Docker環境でvite+Nginxを動作させた時に詰まったポイント

※こちらも環境は違いますが発生している現象は同じです。
https://qiita.com/kiyoshiro/items/9dcba9af830f7ca51323

・stack overflow で検索(改善せず)

httpsを有効

//略
    server: {
        https: true,
    },
//略

https://stackoverflow.com/questions/71018015/vite-js-vue-unwanted-page-reload-happens-only-on-samsung-internet/71071616#71071616

同現象(未解決)
https://stackoverflow.com/questions/70290931/nuxt-3-vite-hmr-infinite-reload-failed

port,protocolの変更
https://github.com/vitejs/vite/issues/1653

//略
  server: {
    hmr: {
      host: 'some.server,
      port: 443,
      protocol: 'wss'
    }
  }
//略

HRMを無効にできないという人(未解決)
https://stackoverflow.com/questions/71956576/vitejs-websocket-connection-to-wss-hostport-failed-due-to-hmr

port,clientPortの指定
https://stackoverflow.com/questions/71050909/how-to-proxy-vites-hmr-request-in-docker

    server: {
        port: 8015, //default is 3000 but I have multiple apps within one site running so I need to define multiple custom ports on the same machine / container
        https: true,
        hmr: {
            clientPort: 9026,
        },
    },

補足情報（FW/ツールのバージョンなど）

主要なツール	ver
npm	8.5.5
node	16.15.0
@vue/cli	5.0.4

ブラウザ
・Edge
・Chrome

お手数をおかけしますが、情報ありましたらお願いいたします。

Answer 1

理解しての回答はできませんが、以下で解決しました。
参考になればと思い回答します。

私の環境
Vue3、Quasar、Vite、Windows10 WSL、Docker、Visual Studio Code

// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [3000,20002],

devServer: {
  // https: true
  open: true, // opens browser window automatically
  hmr: {
    port: 3000
  },      
},