vue中如何获取本地IP地址
更新时间：2022年04月01日 15:06:39 作者：雪抛
这篇文章主要介绍了vue中如何获取本地IP地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
获取本地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])
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了nuxt实现封装axios并且获取token,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue3中多个弹窗同时出现的解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要为大家详细介绍了使用Vue实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了vue中ref和reactive的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下2017-04-04
今天小编就为大家分享一篇浅谈在vue中使用mint-ui swipe遇到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue中使用sass实现换肤功能，实现此功能用到了三个主要文件（base.scss、mixin.scss、varibale.scss）,需要的朋友可以参考下2018-09-09
本篇文章主要介绍了vuex2.0 之 modules,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
我们都知道跨域是同源策略导致的,域名不同、协议不同、端口号不同任意一种情况都会导致跨域,这篇文章主要介绍了从Vue到Postman全面验证API接口跨域问题,需要的朋友可以参考下2024-08-08
在Vue3项目中使用VueCropper裁剪组件实现裁剪及预览效果
这篇文章主要介绍了在Vue3项目中使用VueCropper裁剪组件（裁剪及预览效果）,本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
最新评论