vue3获取本机ip地址

在 Vue 项目中，获取本机 IP 地址通常不是直接在前端进行的，因为浏览器的安全策略限制了访问本地网络信息。不过如果你有一个后端服务器，可以在后端提供这个信息然后通过 API 接口返回给前端。

在 Vue 组件中，你可以定义一个 methods 来发起一个 HTTP 请求到后端服务：

<template>
  <div v-if="ipAddress">
    Your local IP address is: {{ ipAddress }}
  </div>
</template>

<script setup>
import axios from 'axios';

// 假设你的后端 API 地址是 http://localhost:8080/ip
const getIPAddress = async () => {
  try {
    const response = await axios.get('http://localhost:8080/ip');
    // 检查响应是否成功
    if (response.data && response.data.ip) {
      setIpAddress(response.data.ip);
    } else {
      console.error('Failed to fetch IP address');
    }
  } catch (error) {
    console.error(error.message);
  }
};

onMounted(() => {
  getIPAddress();
});

const setAddress = (newIP) => {
  setAddress = null; // 防止多次设置
  ipAddress = newIP;
};
</script>

在这个例子中，`getIPAddress` 函数使用 Axios 发起 GET 请求获取 IP 地址。如果成功，IP 地址会被存储在组件的 `data` 中（这里假设你已经安装并配置了 Axios）。