vue中获取外网IP的方法

薛定喵君

于 2020-08-12 07:45:26 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

文章标签： vue java js react html

本文链接：https://blog.youkuaiyun.com/jsxg2009/article/details/115244347

本文介绍了在Vue项目中如何获取客户端的公网IP地址。通过创建一个名为`outerNetIp.vue`的组件，利用远程JS加载实现。在组件模板中插入<script>标签，并在页面中引用该组件，然后在方法中解析返回的IP信息。这种方法适用于Vue项目的公网IP获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记一下如何在vue项目中获取外网IP

之前有篇文章js获取客户端真实IP记录了如何获取外网IP
那个只是在普通html页面当中的获取方法，在vue项目中就不能这么使用了。

这里介绍一种适用于vue项目的公网IP获取方法
1.components公共组件目录下新建组件outerNetIp.vue用于获取IP

<template>
  <remote-js :src="src"></remote-js>
</template>
<script>
export default {
  name: 'OuterIp',
  data() {
    return {
      src: ''
    }
  },
  components: {
    'remote-js': {
      render(createElement) {
        return createElement('script', {
          attrs: { type: 'text/javascript', src: this.src || 'http://pv.sohu.com/cityjson?ie=utf-8' }
        })
      },
      props: {
        src: { type: String, required: true }
      }
    }
  }
}
</script>

2.页面vue文件中引用组件

<template>
<div>
    ...
    <outer-ip :src="ipUrl"></outer-ip>
    ...
</div>
</template>

<script>
import outerIp from '@/components/outerNetIp.vue'

export default {
    ...
    components: {
        outerIp
    },
    ...
}
</script>

3.methods方法中获取IP即可

...
methods: {
    onClick() {
        let ip = returnCitySN['cip']
    }
}
...

以上。