Vue.js는 개발자가 동적이고 효율적인 사용자 인터페이스를 구축하는 데 도움이 되는 인기 있는 프런트 엔드 개발 프레임워크입니다. 많은 Vue.js 프로젝트에서는 장치를 식별하고 네트워크 디버깅 및 테스트를 위해 로컬 IP 주소를 얻어야 합니다. 다음으로 Vue.js에서 로컬 IP 주소를 얻는 방법을 다루겠습니다.
Vue.js는 네이티브 JavaScript 위에 구축되었으므로 네이티브 JavaScript를 사용하여 로컬 IP 주소를 가져와 Vue.js에서 사용할 수 있습니다. 다음은 네이티브 JavaScript를 통해 로컬 IP 주소를 얻는 코드 예제입니다.
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; } }; }
이 코드는 RTCPeerConnection 개체를 사용하여 로컬 IP 주소를 얻고 onicecandidate 이벤트를 통해 IP 주소를 얻은 후 반환합니다.
Vue.js에서 이 코드를 사용하려면 Vue 플러그인으로 래핑하고 Vue 인스턴스에 추가하면 됩니다.
기본 JavaScript 외에도 타사 라이브러리를 사용하여 로컬 IP 주소를 얻을 수도 있습니다. 그 중 가장 많이 사용되는 라이브러리 중 하나가 ipaddr.js
입니다. ipaddr.js
는 IP 주소를 구문 분석하고 형식을 지정하는 데 사용할 수 있는 순수 JavaScript 라이브러리입니다. 다음은 ipaddr.js
를 사용하여 로컬 네트워크에서 IP 주소를 얻는 방법에 대한 코드 예제입니다. 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.js
rrreee
ipaddr.js
를 사용합니다. IP 주소가 수신되어 배열에 추가되는 RTC 개체를 구문 분석하는 라이브러리입니다. 또한 Vue.js에서 더 쉽게 사용할 수 있도록 Promise를 사용하여 이 배열을 반환합니다. 요약Vue.js에서 로컬 IP 주소를 가져오면 기본 JavaScript 또는 타사 라이브러리를 사용할 수 있습니다. 어떤 방법을 선택하든 Vue.js로 래핑하고 Vue 인스턴스에 추가해야 프로젝트에서 로컬 IP 주소를 쉽게 얻을 수 있습니다. 🎜위 내용은 Vue의 기본 IP 주소를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!