HMR requests are directed to 192.168.x.x, regardless of current host (e.g. localhost)

[MartinManev]

Version

4.5.13

Environment info

System:
    OS: Linux 4.9 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
  Binaries:
    Node: 15.8.0 - ~/.config/nvm/versions/node/v15.8.0/bin/node
    Yarn: Not Found
    npm: 7.13.0 - ~/.config/nvm/versions/node/v15.8.0/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 78.10.0esr
  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.0.6 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.13 
    @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:  4.5.13 
    @vue/cli-plugin-babel: ~4.5.13 => 4.5.13 
    @vue/cli-plugin-router:  4.5.13 
    @vue/cli-plugin-vuex:  4.5.13 
    @vue/cli-service: ~4.5.13 => 4.5.13 
    @vue/cli-shared-utils:  4.5.13 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/web-component-wrapper:  1.3.0 
    vue: ^2.6.12 => 2.6.12 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.7 (16.2.0)
    vue-style-loader:  4.1.3 
    vue-template-compiler: ^2.6.12 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.5.13

Steps to reproduce

Create a new project with vue ui.

$npm run serve

App running at:

• Local: http://localhost:8080/
• Network: http://192.168.x.x:8080/

What is expected?

If visiting http://localhost:8080, then HMR requests should be directed to localhost:8080.

If visiting http://192.168.x.x, then HMR requests should be directed to 192.168.x.x:8080.

If I have a proxy and visiting http://my.domain.com, then HMR requests should be directed to my.domain.com.

What is actually happening?

HMR requests are always directed to 192.168.x.x:8080, regardless of current host.

---

See screenshots.

I know it is possible to configure the webpack dev server to use a specific host and port, but I don't see why it shouldn't be dynamic. Especially when using --host 0.0.0.0.

I hope I'm not missing anything obvious.

[haoqunjiang]

The use case is discussed at https://github.com/vuejs/vue-cli/issues/1472#issuecomment-394755323 and https://github.com/vuejs/vue-cli/commit/da38ed4a2724336bfefa0c6c624a9a5c1765a1d2#commitcomment-31564562

Does it break your app or just bring annoyance?

[MartinManev]

It's not breaking. But in specific cases HMR won't work out of the box and needs extra setup to make it work.