vue获取本机ip地址

在Vue中获取本机IP地址通常需要使用浏览器提供的Web API或者通过后端服务器来实现。以下是一个使用Vue和JavaScript的示例代码，它利用了navigator.mediaDevices.getUserMedia() API来获取本机IP地址。

<template>
  <div>
    本机IP地址: {{ localIP }}
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      localIP: '获取中...'
    };
  },
  created() {
    this.getLocalIP();
  },
  methods: {
    getLocalIP() {
      navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
      })
      .then(stream => {
        stream.getTracks().forEach(track => track.stop());
        RTCPeerConnection = RTCPeerConnection || webkitRTCPeerConnection || mozRTCPeerConnection;
        const pc = new RTCPeerConnection({ iceServers: [] });
        pc.onicecandidate = (ice) => {
          if (ice.candidate) {
            const ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
            const ip_addr = ip_regex.exec(ice.candidate.candidate)[1];
            this.localIP = ip_addr;
            console.log('Local IP address: ', this.localIP);
            pc.onicecandidate = null;
          }
        };
        pc.createDataChannel('', { reliable: false });
        pc.createOffer(pc.setLocalDescription.bind(pc), noop);
      })
      .catch(error => {
        console.error('Error getting local IP:', error);
        this.localIP = '无法获取';
      });
    }
  }
};
</script>

这段代码首先在created钩子中调用了getLocalIP方法。getLocalIP方法使用navigator.mediaDevices.getUserMedia获取本地媒体流，然后停止所有的媒体跟踪。之后，它创建了一个RTCPeerConnection对象，并在onicecandidate事件上注册了一个回调函数，用于在收到ICE候选时获取IP地址。这个过程是通过正则表达式解析候选的字符串表示，以提取IP地址。

请注意，这种方法依赖于WebRTC的ICE（Interactive Connectivity Establishment）过程，它可能不会在所有的浏览器和环境中工作，因为有些浏览器或者设备可能不允许在不与其他端点交换媒体数据的情况下获取IP地址。此外，用户可能需要提供适当的媒体访问权限。