Lokale VUE- und Intranet-(Fern-)Zugriffskonfiguration

Da Hyper-V auf dem lokalen Computer aktiviert ist, ist das standardmäßig abgerufene interne Netzwerk die IP der virtuellen Netzwerkkarte, sodass eine spezielle Methode zum Abrufen der internen Netzwerk-IP erforderlich ist

1. Paket.json

Originalcode

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  },

gewechselt zu

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js  --host 0.0.0.0",
  },

2. webpack.dev.conf.js

1. Code hinzufügen (lokale IP dynamisch beziehen)—— Hinweis: Da Hyper-V auf diesem Computer aktiviert ist, ist eine spezielle Methode erforderlich, um die Intranet-IP zu beziehen

// 获取本地ip
function getNetWorkIp() {
  // 打开host
  let needHost = '';
  try {
      let network = os.networkInterfaces();
      for (const dev in network) {
          let iface = network[dev];
          for (let i = 0; i < iface.length; i++) {
              const alias = iface[i];
              if (
                  alias.family === 'IPv4' &&
                  alias.address !== '127.0.0.1' &&
                  !alias.internal
              ) {
                  needHost = alias.address;
              }
          }
      }
  } catch (error) {
      needHost = 'http://localhost';
  }
  return needHost
}
const IP = getNetWorkIp();

2. Codeänderungen ab

      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

gewechselt zu

      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [
            `App runing at: `,
            `本地: http://${devWebpackConfig.devServer.host}:${port}`,
            `内网: http://${IP}:${port}`,
          ],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

Hinweis: Es gibt andere Methoden im Internet, um die IP der internen Website zu erhalten. Nach dem Versuch, den Hyper-V- Status des Computers zu öffnen , wird nicht die gewünschte IP bezogen, sondern die IP des Ethernet-Adapters vEthernet (Default Switch) erhalten wird.

1. require('ip').address()

2. require('address').ip() wurde getestet, diese Methode erfordert eine spezielle Installation von address( npm i address -D )

Die Ergebnisse, die durch die vorherigen zwei Befehle erhalten wurden, sind wie folgt

Auf diese IP kann lokal zugegriffen werden, aber nicht von anderen Endgeräten unter demselben WIFI

3. Die oben beschriebene getNetWorkIp-Methode kann die gewünschte IP abrufen, und das Ergebnis ist wie folgt

Wie oben gezeigt, ist die IPv4-Adresse das gewünschte Ergebnis.