前端vue项目中如何获取ipv4的本机地址，请写出代码

在Vue前端项目中，由于浏览器环境的安全限制（同源策略），直接通过JavaScript获取IPv4的本机地址通常是受限的，特别是对于非localhost的地址。然而，如果你的应用部署在同一台服务器上，可以通过一些间接的方式来获取，比如通过网络请求到其他已知地址的服务来获取。

一种常见的做法是利用`axios`等HTTP客户端库发起一个GET请求到某个提供IP查询的服务。下面是一个简单的示例，假设你已经安装了`axios`：

<template>
  <div>
    <button @click="fetchLocalIp">获取本机IP</button>
    <p v-if="localIp">{{ localIp }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      localIp: ''
    };
  },
  methods: {
    async fetchLocalIp() {
      try {
        const response = await axios.get('http://jsonip.com'); // 也可以换成其他类似服务
        this.localIp = response.data.ip;
      } catch (error) {
        console.error('获取IP失败', error);
      }
    }
  }
};
</script>

上述代码中，当你点击按钮时，会向`http://jsonip.com`发送一个GET请求，该服务返回用户的IP地址。注意，这种方法依赖于外部服务，如果该服务不可用或更改，则你的应用获取IP的方式可能会受到影响。