vue获取ip地址

// 在 Vue 项目中获取 IP 地址的示例代码

// 方法一：使用 axios 请求外部 API 获取 IP 地址
<template>
  <div>
    <p>你的IP地址是: {{ ip }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      ip: ''
    };
  },
  created() {
    this.fetchIP();
  },
  methods: {
    async fetchIP() {
      try {
        const response = await axios.get('https://api.ipify.org?format=json');
        this.ip = response.data.ip;
      } catch (error) {
        console.error('获取IP地址失败:', error);
      }
    }
  }
};
</script>

<!-- 解释说明：
1. 使用 axios 库发送 HTTP 请求到外部 API（如 ipify）以获取用户的公共 IP 地址。
2. 在 `created` 生命周期钩子中调用 `fetchIP` 方法，确保组件创建时自动获取 IP 地址。
3. 将获取到的 IP 地址存储在组件的 `data` 中，并在模板中显示。
4. 如果请求失败，会捕获错误并在控制台中输出。 -->