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 是一个纯 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 库解析从 RTC 对象收到的 IP 地址，并添加到一个数组中。我们还使用 Promise 返回这个数组，以便更方便地在 Vue.js 中使用。
总结
在 Vue.js 中获取本地 IP 地址，可以使用原生 JavaScript 或第三方库。无论你选择哪种方法，都需要在 Vue.js 中封装它们，并将其添加到 Vue 实例中，以便能够轻松地在项目中获取本地 IP 地址。
作者：PHPz
