获取本地IP地址

IP地址需要通过js获取:

网上有很多查询接口可以获取到IP,查到的搜狐的比较多,我这里就用搜狐的:

http://pv.sohu.com/cityjson?ie=utf-8

1、在浏览器中

直接输入这个地址,就可以获取到ip信息:

在这里插入图片描述

2、在vue文件中,实现如下

(1)在config/index.js中 proxyTable:{ } ,在里面添加代理规则

'/api': {
        target: 'http://pv.sohu.com',//这里是域名,不是完整地址
        changeOrigin: true,//是否跨域
        pathRewrite: {
          '^/api': '' 
        }
 }
  • target: 'http://'接口的域名,注意这里是域名,不是完整的ip;
  • secure: false, // 如果是https接口,需要配置这个参数;
  • changeOrigin:true,// 如果接口跨域,需要进行这个参数配置;

注意:

‘/api’ 为匹配项,target 为被请求的地址,因为在 ajax 的 url 中加了前缀 ‘/api’,而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 ‘/api’ 转为 ‘/’。如果本身的接口地址就有 ‘/api’ 这种通用前缀,就可以把 pathRewrite 删掉。

在这里插入图片描述

(2)具体使用,我在里是用已经封装好的axios

在这里插入图片描述

(3)此处获取到的地址为外网地址:

在这里插入图片描述

获取本地内网IP

在项目的config/index.js下插入代码

const os = require('os');
 
function getNetworkIp() {
	let needHost = ''; // 打开的host
	try {
		// 获得网络接口列表
		let network = os.networkInterfaces();
    // console.log("network",network)
		for (let dev in network) {
      
			let iface = network[dev];
			for (let i = 0; i < iface.length; i  ) {
				let alias = iface[i];
				if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
					needHost = alias.address;
          // console.log("alias.address",alias.address)
				}
        // console.log("alias",alias)
			}
		}
	} catch (e) {
		needHost = 'localhost';
	}
	return needHost;
}

把host按照下图修改:

在这里插入图片描述

最后,在需要拿到ip的主页中插入以下代码:

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

vue中如何获取本地IP地址的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. iOS:UDID已弃用… MAC地址?

    我们知道苹果公司不赞成开发者访问UDID.但据我所知,可以获得iDevice的MAC地址.那么有什么区别呢?

  3. swift 开发库

    1、CryptoSwiftswift加密库,支持md5,sha1,sha224,sha256...github地址:https://github.com/krzyzanowskim/CryptoSwift2、KingfisherKingfisher是一个异步下载和缓存图片的库类似于SDWebImage只不过它是纯Swift的实现github地址:https://github.com/onevcat

  4. Swift 实用的第三库

    http://www.swiftmi.com/topic/425.html给大家分享一些实用的第三方库,在这里就不介绍一下比如AlamofireSwiftyJSON等常用的了.重点介绍一些实用的.EZSwiftExtensionsSwift扩展集合包含很多常用的一些工具扩展.比如时间,系统版本等.详情查看README.md源码地址:GitHubFormatFormat数字、货币、地址及颜色进行格式

  5. Swift3.0 Swift2.3 获取IP地址 获取网关地址

    最近需要在Swift项目中获取路由器的网关地址,在网上找了半天的代码也没发现太多有价值的东西,而且大多都是OC代码,很少有Swift的相关代码,只找到了一个通过Swift代码获取设备IP的代码,最后实在没办法只能曲线救国了。下面上代码:思路就是把获取到的设备IP地址的最后一位手动修改为”1”,前面三位不需要修改,比如我的手机ip地址是192.168.31.212,所以网关地址就是192.168.31.1。最近苹果更新了Swift3.0,这里更新一下代码。

  6. android – 获取设备的MAC地址 – 当wifi关闭时

    我使用以下代码找到Android设备的MAC地址:但在这种情况下,当Wifi关闭时,我无法获得MAC地址.即使WIFI关闭,如何获取Android设备的MAC地址.谢谢解决方法为什么不立即启用Wifi,直到你获得MAC地址,然后在获得MAC地址后禁用它?

  7. android – Segmentation Fault中’code’的含义是什么?

    我在android中看到了这2个分段错误.一个说SEGV_MAPERR,另一个说SEGV_ACCERR.你能告诉我这两个有什么不同吗?

  8. android – 在Google Play的Billing API v3中解决耗材的API购买逻辑缺陷(与使用API​​ v3的消耗品的每个人相关)

    )添加到GooglePlay并将第一个列表中的第2步更改为:可以非常轻松地解决此问题:>使用购买ID作为开发人员有效负载,使用getBuyIntent为集合中的下一个可用SKU启动购买流程.关于黑客行为的说明:>通过FreedomAPK或类似产品完成虚假购买:这些应用程序基本上冒充GooglePlay商店完成购买.要检测它们,需要在购买收据中包含verifythesignature并拒绝未通过支票的购买,大多数应用程序都不会这样做.大多数情况下问题解决了.>通过GameKiller或类似方式

  9. android – 从“canonical_addresses”表中获取地址

    我正在开发一个Android应用程序.我从下面的uri中获取了recipient_id.现在我想使用收件人ID从canonical_addresses“表中获取地址.但我不知道查询canonical_addresses表”.我在网上搜索了很多.请帮我找个解决方案的朋友.解决方法Canonical表有两列,_id和地址.当您获得收件人ID时,您将在规范地址表中查找该ID.对于多个收件人,ID由空格分

  10. android – 我可以在我的应用中使用Google Places意图吗?

    我有一个应用程序,显示一个地图,其中包含用户附近地址的标记.我希望当用户点按标记时,可以在Google商家信息应用中打开地址标记.我不确定Places是否足够开放供其他人随意使用.目前我只是使用搜索API来获取地址的路线.不是最优雅的解决方案:(谢谢解决方法是的,可以使用意图打开Google商家信息活动.但我不知道如何将地址指定为数据参数.实际上,您可以通过意图在Android中打开任何应用程序.

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部