vue3网页怎么获取浏览器ip地址

在Vue3中，你可以使用JavaScript的内置方法来获取浏览器的IP地址。这里是一个简单的示例：

<template>
  <div>
    <p v-if="ipAddress">{{ ipAddress }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const getIPAddress = async () => {
  const ipAddress = await new Promise((resolve) => {
    if (window.XMLHttpRequest) {
      // 使用XMLHttpRequest（适用于现代浏览器）
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://api.ipify.org?format=json');
      xhr.onload = function () {
        resolve(xhr.responseText);
      };
      xhr.send();
    } else if (typeof window.ActiveXObject !== 'undefined') {
      // 使用ActiveXObject（IE6-8的支持）
      try {
        const ieXhr = new ActiveXObject('Microsoft.XMLHTTP');
        ieXhr.open('GET', 'https://api.ipify.org?format=json');
        ieXhr.onreadystatechange = function () {
          if (ieXhr.readyState === 4 && ieXhr.status === 200) {
            resolve(ieXhr.responseText);
          }
        };
        ieXhr.send();
      } catch (err) {
        console.error('Failed to get IP address with ActiveXObject:', err);
        resolve('');
      }
    } else {
      // 对于其他不支持以上方法的情况（如Node.js环境），可以尝试其他库或服务
      resolve('');
    }
  });

  return ipAddress;
};

const ipAddressRef = ref('');
getIPAddress().then((ip) => {
  if (ip) {
    ipAddressRef.value = ip;
  } else {
    console.warn('Failed to get the IP address');
  }
});
</script>

这个例子创建了一个异步函数`getIPAddress`，它发送一个GET请求到`https://api.ipify.org`来获取IP地址。当获取成功后，将结果保存到Vue的响应式数据`ipAddressRef`中，并在页面上显示出来。