Vue获取本机IP地址的方法

在Vue项目开发中，有时我们需要获取本机的IP地址来实现特定功能，比如根据用户所在网络环境进行个性化设置或数据统计等。那么，如何在Vue中获取本机IP地址呢？

一种常见的方法是借助第三方API来实现。许多网络服务提供商都提供了获取IP地址的接口。我们可以使用axios库来发送HTTP请求到这些API。例如，有名的ipify API，它提供了简单的接口让我们快速获取公网IP地址。在Vue项目中，先安装axios：npm install axios --save。然后在需要获取IP的组件中引入axios：import axios from 'axios'; 。接着编写一个方法来发送请求获取IP地址：

methods: {
    getIPAddress() {
        axios.get('https://api.ipify.org?format=json')
         .then(response => {
                this.ipAddress = response.data.ip;
            })
         .catch(error => {
                console.error('获取IP地址失败:', error);
            });
    }
}

在上述代码中，我们发送一个GET请求到ipify API，当请求成功时，将返回的IP地址赋值给组件的data属性中的ipAddress变量。

然而，这种方式获取的是公网IP地址。如果想要获取局域网内的IP地址，情况会稍微复杂一些。在浏览器环境下，由于安全策略限制，无法直接获取局域网IP地址。但在Node.js环境中，可以通过一些模块来实现。比如使用os模块，它是Node.js的内置模块。在Node.js项目中，引入os模块：const os = require('os'); 。然后编写如下代码获取局域网IP：

const interfaces = os.networkInterfaces();
for (const devName in interfaces) {
    const iface = interfaces[devName];
    for (let i = 0; i < iface.length; i++) {
        const alias = iface[i];
        if (alias.family === 'IPv4' && alias.address!== '127.0.0.1' &&!alias.internal) {
            console.log(alias.address);
        }
    }
}

上述代码遍历系统网络接口，找到IPv4地址且不是本地回环地址（127.0.0.1）和内部地址的IP，即为局域网IP。

在Vue项目中获取本机IP地址，根据需求选择合适的方法，公网IP可借助第三方API，而局域网IP需在Node.js环境下利用相关模块来获取，掌握这些方法能有效满足不同场景下的开发需求 。