fix: display correct address when multiple network adapters present (#…

…4083)

fixes #3266

see #3266 (comment)

Thanks to @shenliangv

(cherry picked from commit f3d2c1c)

packages/@vue/cli-service/lib/util/prepareURLs.js

@@ -9,6 +9,7 @@
 const url = require('url')
 const chalk = require('chalk')
 const address = require('address')
+const defaultGateway = require('default-gateway')
 
 module.exports = function prepareUrls (protocol, host, port, pathname = '/') {
   const formatUrl = hostname =>
@@ -33,7 +34,8 @@ module.exports = function prepareUrls (protocol, host, port, pathname = '/') {
     prettyHost = 'localhost'
     try {
       // This can only return an IPv4 address
-      lanUrlForConfig = address.ip()
+      const result = defaultGateway.v4.sync()
+      lanUrlForConfig = address.ip(result && result.interface)
       if (lanUrlForConfig) {
         // Check if the address is a private ip
         // https://en.wikipedia.org/wiki/Private_network#Private_IPv4_address_spaces

packages/@vue/cli-service/package.json

@@ -46,6 +46,7 @@
     "cssnano": "^4.1.10",
     "current-script-polyfill": "^1.0.0",
     "debug": "^4.1.1",
+    "default-gateway": "^4.2.0",
     "dotenv": "^7.0.0",
     "dotenv-expand": "^5.1.0",
     "escape-string-regexp": "^1.0.5",