So erhalten Sie die native IP-Adresse von vue

Vue.js ist ein beliebtes Front-End-Entwicklungsframework, das Entwicklern hilft, dynamische und effiziente Benutzeroberflächen zu erstellen. In vielen Vue.js-Projekten müssen wir die lokale IP-Adresse erhalten, um das Gerät zu identifizieren und für Netzwerk-Debugging und -Tests. Als Nächstes erfahren Sie, wie Sie die lokale IP-Adresse in Vue.js erhalten.

1. Lokale IP-Adresse über natives JavaScript abrufen

Vue.js basiert auf nativem JavaScript, sodass wir mithilfe von nativem JavaScript lokale IP-Adressen abrufen und in Vue.js verwenden können. Das Folgende ist ein Codebeispiel zum Abrufen der lokalen IP-Adresse über natives JavaScript:

function getLocalIpAddress() {
  window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
  var pc = new RTCPeerConnection({iceServers: []}), noop = function() {};
  pc.createDataChannel("");
  pc.createOffer(pc.setLocalDescription.bind(pc), noop);
  pc.onicecandidate = function(ice) {
    if (ice && ice.candidate && ice.candidate.candidate) {
      var s = ice.candidate.candidate.split('
')[0].split(' ')[4];
      return s;
    }
  };
}

Dieser Code verwendet das RTCPeerConnection-Objekt, um die lokale IP-Adresse abzurufen, und gibt sie zurück, nachdem die IP-Adresse über das onicecandidate-Ereignis abgerufen wurde.

Um diesen Code in Vue.js zu verwenden, können wir ihn in ein Vue-Plugin einbinden und zur Vue-Instanz hinzufügen.

2. Verwenden Sie eine Bibliothek eines Drittanbieters, um die lokale IP-Adresse abzurufen

Zusätzlich zu nativem JavaScript können wir auch eine Bibliothek eines Drittanbieters verwenden, um die lokale IP-Adresse abzurufen. Unter diesen ist ipaddr.js eine der am häufigsten verwendeten Bibliotheken. ipaddr.js ist eine reine JavaScript-Bibliothek, die zum Parsen und Formatieren von IP-Adressen verwendet werden kann. Im Folgenden finden Sie ein Codebeispiel für die Verwendung von ipaddr.js, um eine IP-Adresse aus dem lokalen Netzwerk zu erhalten: ipaddr.js。 ipaddr.js 是一个纯 JavaScript 库，可以用于解析和格式化 IP 地址。下面是如何使用 ipaddr.js 从本地网络中获取 IP 地址的代码示例：

import ipaddr from 'ipaddr.js';

const findLocalIpAddress = () => {
  return new Promise((resolve, reject) => {
    const RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
    let pc = new RTCPeerConnection({iceServers: []})
    let ips = []
    pc.createDataChannel('')
    pc.createOffer().then(offer => pc.setLocalDescription(offer)).catch(e => console.log(e))
    pc.onicecandidate = event => {
      if (!event.candidate) {
        // all candidates have been sent
        resolve(ips)
      } else {
        const ip = ipaddr.parse(event.candidate.candidate.split(" ")[4]).toString()
        if (ips.indexOf(ip) == -1) {
          ips.push(ip)
        }
      }
    }
    setTimeout(() => {
      reject(new Error('Timeout'))
    }, 5000)
  })
}

这段代码中，我们使用 ipaddr.jsrrreee

In diesem Code verwenden wir ipaddr.js Bibliothek zum Parsen des RTC-Objekts. Die IP-Adresse wird empfangen und einem Array hinzugefügt. Wir verwenden auch ein Promise, um dieses Array zur einfacheren Verwendung in Vue.js zurückzugeben.

Zusammenfassung

Erhalten Sie die lokale IP-Adresse in Vue.js. Sie können natives JavaScript oder Bibliotheken von Drittanbietern verwenden. Für welche Methode Sie sich auch entscheiden, Sie müssen sie in Vue.js einbinden und zu Ihrer Vue-Instanz hinzufügen, damit Sie problemlos die lokale IP-Adresse in Ihrem Projekt erhalten können. 🎜

Das obige ist der detaillierte Inhalt vonSo erhalten Sie die native IP-Adresse von vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!