vue 获取公网IP和地理位置

文章目录

vue 获取公网IP和地理位置
- 1. 引入脚本
- 2. 配置`.eslintrc.js`
- 3. 直接使用
- 4. 保存后使用

1. 引入脚本

在public文件夹下面的index.html中的body标签里加入

<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>

如:

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title>111</title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script></body>
</html>

2. 配置`.eslintrc.js`

在.eslintrc.js中添加以下代码以解决returnCitySN未定义问题

globals:{ 'returnCitySN': true}

3. 直接使用

console.log(returnCitySN)
// {"cip": "21.69.11.119", "cid": "000000", "cname": "北京市"}const ip = returnCitySN['cip'] || '0.0.0.0'
const city = returnCitySN['cname'] || '未知'

4. 保存后使用

在App.vue的created()方法中将ip信息保存到sessionStorage

<template><div id="app"><router-view /></div>
</template>
<script>
export default {created() {sessionStorage.setItem('ip', returnCitySN['cip'] || '0.0.0.0')sessionStorage.setItem('city', returnCitySN['cname'] || '未知')}
}
</script>

在需要的地方,直接获取

const ip = sessionStorage.getItem('ip')
const city = sessionStorage.getItem('city')

vue 获取公网IP和地理位置相关推荐

golang 获取公网ip 内网ip 检测ip类型校验ip区间 ip地址string和int转换判断ip地区国家运营商
目录简要简介net包什么是外网IP和内网IP? 获取公网ip 获取本地ip 判断是否是公网ip ip地址string转int ip地址int转string 判断ip地址区间通过淘宝接口根据公网i ...
android公网ip,android 获取公网ip 内网ip
/** * 获取公网ip * @return */ public String getNetIp() { URL infoUrl = null; InputStream inStream = null ...
golang中获取公网ip、查看内网ip、检测ip类型、校验ip区间、ip地址string和int转换、根据ip判断地区国家运营商等
作者: 一蓑烟雨1989 所属专栏: Go从不放弃到实战本文链接:https://blog.csdn.net/wangshubo1989/article/details/78066344 生命不止, ...
服务器搭建网站公网ip,如何获取公网ip，自己搭建公网ip服务器的方法
#Go语言初体验 – 获取公网IP小服务.由于免费的动态dns刷新IP很慢, 手动实时获取办公室网络公网IP. #GetIp.go 是服务端程序, 用于返回当前访问的请求的公网IP. demo地址: ...
可获取公网IP的网址
可获取公网IP的网址 http://1111.ip138.com/ic.asp, http://ip.360.cn/IPShare/info, http://www.ip508.com/ip, htt ...
一种获取公网ip地址并发送邮件至指定邮箱的实现方法
背景在之前一篇文章中介绍了利用路由器的端口映射功能实现内网穿透的方法. ubuntu SSH内网穿透 + Vscode远程访问在实际的使用过程中,发现这一实现途径存在一些不足之处,即当 ...
windows获取公网IP，记录公网ip脚本和命令
获取公网IP命令 curl ipv4.icanhazip.com 把公网IP记录到日志里面写个BAT脚本定时执行 Date /T >> C:\log\iplog.txt time /t ...
qiao-get-ip：免费获取公网ip
[前言] nodejs自带的获取ip的一些api,获取的都是用户本地的ip, 不是公网ip(public ip),公网ip只有在用户连入internet后才会有, 获取用户公网ip,一般的方法是通过一 ...
通过希网获取公网ip
原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://scalpel00.blog.51cto.com/1071749/347971 很 ...

vue 获取公网IP和地理位置

vue 获取公网IP和地理位置

文章目录

1. 引入脚本

2. 配置`.eslintrc.js`

3. 直接使用

4. 保存后使用

vue 获取公网IP和地理位置相关推荐

最新文章

热门文章

vue 获取公网IP和地理位置

vue 获取公网IP和地理位置

文章目录

1. 引入脚本

2. 配置.eslintrc.js

3. 直接使用

4. 保存后使用

vue 获取公网IP和地理位置相关推荐

最新文章

热门文章

2. 配置`.eslintrc.js`