vue.js 是一款流行的前端开发框架，它可以帮助开发者构建动态且高效的用户界面。在许多 vue.js 项目中，我们需要获取本地 ip 地址来识别设备以及进行网络调试和测试。接下来，我们将介绍如何在 vue.js 中获取本地 ip 地址。
- 通过原生 JavaScript 获取本地 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 实例中。
- 使用第三方库获取本地 IP 地址
除了原生 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 地址。
