devServer.sockPath配置有问题

[Zhangjd]

Version

3.10.0

Reproduction link

https://github.com/Zhangjd/vue-cli-demo

Environment info

Environment Info:

  System:
    OS: macOS Sierra 10.12.1
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
  Binaries:
    Node: 8.9.4 - /usr/local/bin/node
    Yarn: Not Found
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 60.0.1
    Safari: 10.0.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.10.0
    @vue/babel-preset-jsx:  1.1.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  3.10.0
    @vue/cli-plugin-babel: ^3.10.0 => 3.10.0
    @vue/cli-plugin-eslint: ^3.10.0 => 3.10.0
    @vue/cli-service: ^3.10.0 => 3.10.0
    @vue/cli-shared-utils:  3.10.0
    @vue/component-compiler-utils:  2.6.0 (3.0.0)
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 3.5.3

Steps to reproduce

1. Use vue create to create a new project.
2. Add the following config into vue.config.js.
3. Run npm run serve.
4. Open http://localhost:8080/.

module.exports = {
  devServer: {
    sockPath: 'mySock'
  }
}

What is expected?

The page starts with 1 sockjs requests，which is http://localhost:8080/mySock/info?t=1565709652649.

What is actually happening?

The page starts with 2 sockjs requests, one is http://localhost:8080/mySock/info?t=1565709652649, another one is http://192.168.198.176:8080/sockjs-node/info?t=1565709652650，the second URL is not correct, and it causes more sockjs-node/info requests later, which are redundant.

---

用中文解释一下：我需要通过设置sockPath来自定义sockjs-node的路径，在这个例子中，初始化页面发送了两个sockjs-node请求，一个是我自定义的路径，另一个路径是错误的（应该是多余的？我印象中旧版本只会发起一个sockjs-node请求）。如果第二个请求失败（比如在生产环境中出现5xx错误）就会导致页面无法连接热更新的websocket。

[kakenbok]

Workaround:

devServer: {
  public: '0.0.0.0',
  sockPath: '/mysockjs'
},

configureWebpack: {
  plugins: [
    {
      apply: compiler => {
        compiler.hooks.entryOption.tap('entry', () => {
          const clients = compiler.options.entry.app
          for (const index in clients) {
            if (clients[index].match(/sockjs-node/)) {
              clients[index] = clients[index].replace('0.0.0.0/sockjs-node', '0.0.0.0&sockPath=/mysockjs')
            }
          }
        })
      }
    }
  ],
...