首页 > 其他分享 >vue项目中怎么获取当前用户ip?

vue项目中怎么获取当前用户ip?

时间:2022-12-30 10:14:44浏览次数:32  
标签:vue console network 获取 ip alias let address

一、在项目的config/index.js文件下插入如下代码:

 1 const os = require('os');
 2   
 3 function getNetworkIp() {
 4     let needHost = ''; // 打开的host
 5     try {
 6         // 获得网络接口列表
 7         let network = os.networkInterfaces();
 8     // console.log("network",network)
 9         for (let dev in network) {
10        
11             let iface = network[dev];
12             for (let i = 0; i < iface.length; i++) {
13                 let alias = iface[i];
14                 if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
15                     needHost = alias.address;
16           // console.log("alias.address",alias.address)
17                 }
18         // console.log("alias",alias)
19             }
20         }
21     } catch (e) {
22         needHost = 'localhost';
23     }
24     return needHost;
25 }

二、在项目的config/index.js文件下修改host:

 

 三、在页面需要的地方获取ip:

var ip = window.location.host;
console.log("ip",ip.split(":")[0])

这样就能得到我们需要的ip了。。。

标签:vue,console,network,获取,ip,alias,let,address
From: https://www.cnblogs.com/heisetianshi/p/17014155.html

相关文章

  • Vue生命周期
    官网解释一、Vue的生命周期Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣......
  • Dubbo 3 之 Triple 流控反压原理解析
    作者:顾欣Triple是Dubbo3提出的基于HTTP2的开放协议,旨在解决Dubbo2私有协议带来的互通性问题。Triple基于HTTP/2定制自己的流控,支持通过特定的异常通知客户......
  • IP子网划分
    1Byte=8bitIP地址由32位二进制(32bit)组成  实例:10101000:第一位至“1”所以为128;第三位至“1”所以为32;第五位至“1”所以为8=128+32+8=168192:128+64=第一位和......
  • 从零开始vue3管理系统
    1,npminitvue@latestTypeScriptYesJSXNoVueRouterYesPiniaYes//替代vuex做stateVitestYes//单元测试ESLintYesPrettierYes2,cdvue-projectnpminstallnpmr......
  • 最近做Vue音乐小项目遇到的坑
    概要:Chrome测试Vue音乐小项目出现的坑1.audio元素Chrome等浏览器禁止音频自动播放以及操作Dom元素播放。使用Vue制作类网易云音乐单页面应用,准备使用隐藏audio元素,使用......
  • 10Javascript高级
    JavaScript面向对象目标:能够说出什么是面向对象能够说出类和对象的关系能够使用class创建自定义类能够说出什么是继承面向对象编程介绍:两大编程思想:面向过程面向对象面向过......
  • 7JavaScript基础语法
    第一章1计算机编程基础什么是编程语言编程语言和标记语言的不同常见的数据存储单位及其换算关系内存的主要作用以及特点2编程语言编程:就是让计算机为解决某个问题而使用......
  • NOIP2022退役记
    退役记标签(空格分隔):重要待到秋来九月八,我花开后百花杀方才想了很长时间,我感觉我应该写这个东西,为我这一年多的竞赛生涯画上一个完整的句号。考试失利,我经历过许多,这次......
  • Vue项目编译报错 'error:03000086:digital envelope routines::initialization error'
    升级了本地的nodejs版本,导致旧项目无法运行,运行提示如下。   原因是nodejs版本过高。解决办法:降低node.js版本......
  • 2.1JavaScript基础语法
    第一章1计算机编程基础什么是编程语言编程语言和标记语言的不同常见的数据存储单位及其换算关系内存的主要作用以及特点2编程语言编程:就是让计算机为解决某个问题而使用......