花了1天时间踩坑，终于探索出来了最方便的解决方式。。
网上大部分大厂的获取ip的方式都已不可用，只有搜狐接口还有一些小网站搞出来的接口能用。这里我使用的是搜狐获取IP的接口。
搜狐接口返回的是一个js变量，类似下面格式：
var returnCitySN = {"cip": "XXX.XXX.XXX.XXX", "cid": "100000", "cname": "北京市"};
直接引用js文件就行
<html>
<body>
<div class="center" id="ip">div>
<script src="http://pv.sohu.com/cityjson?ie=utf-8">script>
<script type="text/javascript">
<!-- document.write(returnCitySN["cip"]+','+returnCitySN["cname"]) -->
var words = returnCitySN["cname"]+': '+returnCitySN["cip"];
document.getElementById('ip').innerHTML = words;
script>
body>
html>
最开始我就是用的这种方式，获取接口数据后再将处理后的数据返回给前端 。直到我把项目放到云服务器后，才发现后端获取的接口数据其实是服务端的ip，并不是客户端的ip。
像我上面写的html使用方法一样，使用两个script标签，导入js文件。
毫无疑问报错了。
报错原因：vue是单页面应用，不能使用两个script标签
使用axios访问接口,具体方法这里不再赘述。结果就是和第1条的结果一样，接口返回的数据是服务端的ip，并不是客户端的ip。
在项目中的index.html文件导入js文件
<script src="http://pv.sohu.com/cityjson?ie=utf-8">script>
<script type="text/javascript">
var Ip=returnCitySN['cip']
var cityname=returnCitySN['cname']
localStorage.setItem('Ip', Ip)
script>
其中最重要的是localStorage.setItem(‘key’,A)函数,关于这个函数，百科是这样说的：
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
setItem可以将变量A存储到key字段，这样我们就可以在index.html文件导入后，在全局使用这个变量：
let strIp:string=String(localStorage.getItem('Ip'))