Vue-cli: prepareUrls may not build the right localUrlForBrowser for NAT Networks

[Toilal]

What problem does this feature solve?

Hot Module Reload may not work when running yarn serve from a docker container, or when accessing to the dev server from a NAT network that may have a different IP / Port than the configured one inside vue.config.js.

Problem is that client may fail to connect back to the webpack-dev-server because host/port is wrong (https://github.com/webpack/webpack-dev-server/issues/416).

It should be possible to provide options to provide the host/port that should be used to reach the webpack-dev-server from the browser. Those options should be passed to create the right entry point for webpack-dev-server client

What does the proposed API look like?

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 1288,
    public: { // To be used by the browser
        host: '192.168.1.100',
        port: 80,
    },
    disableHostCheck: true
  }
}

[Toilal]

Possible workaround in vue.config.js

module.exports = {
  configureWebpack: (conf) => {
    conf.entry['app'].push(require.resolve(`webpack-dev-server/client`) + '?http://192.168.1.100:80')
  },
  devServer: {
    host: '0.0.0.0',
    port: 1288,
    disableHostCheck: true
  }
}

[yyx990803]

Closed via #868