使用 Vue.js 获取 IP 地址的方法有两种:使用外部 API:通过 axios 库调用外部 API 获取 IP 地址。通过 WebRTC 连接:建立 peerjs 连接,通过 id 访问 IP 地址,需要启用 WebRTC。

利用 Vue.js 获取 IP 地址
方法 1:使用外部 API
步骤:
- 安装
axios库:npm install axios - 在组件中引入
axios:import axios from 'axios' - 使用
axios的get方法获取外部 IP 地址 API:
async getExternalIP() {
try {
const response = await axios.get('https://api.ipify.org?format=json');
return response.data.ip;
} catch (error) {
console.error(error);
}
}方法 2:通过 WebRTC 连接
步骤:
- 安装
peerjs库:npm install peerjs - 在组件中引入
peerjs:import Peer from 'peerjs' - 建立 Peer.js 连接:
const peer = new Peer();
peer.on('open', (id) => {
// 连接成功,可通过 `id` 访问 IP 地址
console.log('Your IP address is:', id);
});注意:此方法需要用户启用浏览器 WebRTC 功能。
选择方法:
选择哪种方法取决于您的具体需求:
- 外部 API:简单易行,但可能受到速率限制和可靠性问题影响。
- WebRTC 连接:更可靠,但需要用户启用 WebRTC 并可能需要服务器端设置。










