Hot reload does not work over HTTPS (wrong host)

[DanielStout5]

Version

5.0.4

Reproduction link

github.com

Environment info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700F @ 2.50GHz
  Binaries:
    Node: 14.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.53)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  5.0.4
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  5.0.4
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.4
    @vue/cli-plugin-eslint: ~5.0.0 => 5.0.4
    @vue/cli-plugin-router:  5.0.4
    @vue/cli-plugin-vuex:  5.0.4
    @vue/cli-service: ~5.0.0 => 5.0.4
    @vue/cli-shared-utils:  5.0.4
    @vue/compiler-core:  3.2.36
    @vue/compiler-dom:  3.2.36
    @vue/compiler-sfc:  3.2.36
    @vue/compiler-ssr:  3.2.36
    @vue/component-compiler-utils:  3.3.0
    @vue/reactivity:  3.2.36
    @vue/reactivity-transform:  3.2.36
    @vue/runtime-core:  3.2.36
    @vue/runtime-dom:  3.2.36
    @vue/server-renderer:  3.2.36
    @vue/shared:  3.2.36
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^8.0.3 => 8.7.1
    vue: ^3.2.13 => 3.2.36
    vue-eslint-parser:  8.3.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  17.0.0 (15.9.8)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

• Run npm run serve
• Open https://localhost:8081 in your browser
• Make a change in JS

What is expected?

The change should be immediately visible

What is actually happening?

The change is not visible, and there is an error about unable to connect to the websocket in the console.

---

It looks like the hot reload websocket connection is using the network IP address even on localhost, instead of using the host from the current environment.

So on https://localhost:8081 it's trying to load wss://192.168.0.109:8081/ws (my computer's local IP), and my browser (both Firefox and Chrome) are generating a security warning that I can't see to accept.

It does work if I manually open https://192.168.0.109:8081 and accept the security warning, but this is rather non-obvious when onboarding people to a project.

[raluseru]

I get the same . My config looks like this

module.exports = defineConfig({
    transpileDependencies: true,
    outputDir: distPath,
    publicPath: process.env.NODE_ENV === "production" ? distPath : "/",
    indexPath: path.resolve(__dirname, distPathRoot + "index.html"),
    filenameHashing: false,
    devServer: {
        https: true,
        port: 7777,
       
    },

})