vue获取本机ip地址

 mounted() {

      this.getUserIP((ip)=>{

         console.log('ip=')

         console.log(ip)

      })

    },

   methods: {

 getUserIP (onNewIP) {

        //获取不到可能是因为chrome浏览器版本过高,需要修改浏览器配置如下

        //在chrome地址栏输入:chrome://flags/#enable-webrtc-hide-local-ips-with-mdns

         // 把 Anonymize local IPs exposed by WebRTC 设置为 disabled

         //不能确保每一个浏览器都设置打开webRTC~~~~~

      let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;

      let pc = new MyPeerConnection({

          iceServers: []

        });

      let noop = () => {

        };

      let localIPs = {};

      let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;

      let iterateIP = (ip) => {

        if (!localIPs[ip]) {onNewIP(ip);}

        localIPs[ip] = true;

      };

      pc.createDataChannel('');

      pc.createOffer().then((sdp) => {

        sdp.sdp.split('\n').forEach(function (line) {

          if (line.indexOf('candidate') < 0) {return;}

          line.match(ipRegex).forEach(iterateIP);

        });

        pc.setLocalDescription(sdp, noop, noop);

      }).catch((reason) => {

        console.log(reason);

      });

      pc.onicecandidate = (ice) => {

        if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) {return;}

        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);

      };

    }

}

第二种方式

在vue.config.js中webpack构建时定义process.env属性,这样全局可获得

// 获取本机ip
function getIpAdress () {
  const interfaces = require('os').networkInterfaces()
  for (const devName in interfaces) {
    const iface = interfaces[devName]
    for (let i = 0; i < iface.length; i++) {
      const alias = iface[i]
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
        return alias.address
      }
    }
  }
}


module.exports = {
    ...,
    config.plugin('define').tap(args => {
      args[0]['process.env'].CURRENT_IP = JSON.stringify(getIpAdress())
      return args
    })
  },
  ...
}
 

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值