fix(serve): make sockjs url fixed with host (#1476)

Author: jkzing

packages/@vue/cli-service/lib/commands/serve.js

@@ -30,6 +30,7 @@ module.exports = (api, options) => {
     const isProduction = process.env.NODE_ENV === 'production'
 
     const path = require('path')
+    const url = require('url')
     const chalk = require('chalk')
     const webpack = require('webpack')
     const WebpackDevServer = require('webpack-dev-server')
@@ -60,11 +61,37 @@ module.exports = (api, options) => {
       }
     }
 
+    // resolve server options
+    const useHttps = args.https || projectDevServerOptions.https || defaults.https
+    const protocol = useHttps ? 'https' : 'http'
+    const host = args.host || process.env.HOST || projectDevServerOptions.host || defaults.host
+    portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port
+    const port = await portfinder.getPortPromise()
+
+    const urls = prepareURLs(
+      protocol,
+      host,
+      port,
+      options.baseUrl
+    )
+
+    const proxySettings = prepareProxy(
+      projectDevServerOptions.proxy,
+      api.resolve('public')
+    )
+
     // inject dev & hot-reload middleware entries
     if (!isProduction) {
+      const sockjsUrl = url.format({
+        protocol,
+        port,
+        hostname: urls.lanUrlForConfig || 'localhost',
+        pathname: '/sockjs-node'
+      })
+
       const devClients = [
         // dev server client
-        require.resolve(`webpack-dev-server/client`) + (options.baseUrl !== '/' ? '?/sockjs-node' : ''),
+        require.resolve(`webpack-dev-server/client`) + `?${sockjsUrl}`,
         // hmr client
         require.resolve(projectDevServerOptions.hotOnly
           ? 'webpack/hot/only-dev-server'
@@ -82,24 +109,6 @@ module.exports = (api, options) => {
     // create compiler
     const compiler = webpack(webpackConfig)
 
-    // resolve server options
-    const useHttps = args.https || projectDevServerOptions.https || defaults.https
-    const host = args.host || process.env.HOST || projectDevServerOptions.host || defaults.host
-    portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port
-    const port = await portfinder.getPortPromise()
-
-    const urls = prepareURLs(
-      useHttps ? 'https' : 'http',
-      host,
-      port,
-      options.baseUrl
-    )
-
-    const proxySettings = prepareProxy(
-      projectDevServerOptions.proxy,
-      api.resolve('public')
-    )
-
     // create server
     const server = new WebpackDevServer(compiler, Object.assign({
       clientLogLevel: 'none',