Nuxt:利用public-ip这个npm包来获取公网IP

目录

一、安装public-ip包

html 复制代码
npm install public-ip

1.在Vue组件中使用

你可以在Nuxt.js的任意组件或者插件中使用public-ip来获取公网IP。下面是在一个Vue组件中如何使用它的例子:

html 复制代码
<template>
  <div>
    <h1>你的公网IP是:{{ ip }}</h1>
  </div>
</template>
 
<script>
import {publicIp, publicIpv4, publicIpv6} from 'public-ip';
 
export default {
  data() {
    return {
      ip: null,
    };
  },
  async mounted() {
    console.log(await publicIp());   // IPv4或IPv6
    console.log(await publicIpv6()); // IPv6
    console.log(await publicIpv4()); // IPv4
    try {
      this.ip = await publicIpv4(); // 获取IPv4公网IP
      // 或者使用 publicIpv6() 获取IPv6公网IP
    } catch (err) {
      console.error('无法获取公网IP', err);
    }
  },
};
</script>

2.在Nuxt.js插件中使用public-ip

你也可以在Nuxt.js的插件中全局使用public-ip,这样可以在任何组件中直接访问公网IP。

(1)在plugins目录下创建一个新的文件,例如public-ip.js:

javascript 复制代码
import Vue from 'vue';
import {publicIp, publicIpv4, publicIpv6} from 'public-ip';
 
export default async ({ app }, inject) => {
  try {
    const ip = await publicIpv4(); // 获取IPv4公网IP
    // 或者使用 publicIpv6() 获取IPv6公网IP
    inject('publicIp', ip); // 注入公网IP到Vue实例中,可以通过this.$publicIp访问
  } catch (err) {
    console.error('无法获取公网IP', err);
  }
};

(2)在nuxt.config.js文件中注册这个插件:

javascript 复制代码
export default {
  plugins: [
    '~/plugins/public-ip' // 确保路径正确,根据你的项目结构调整路径
  ],
}

(3)在组件中使用注入的公网IP:

html 复制代码
<template>
  <div>
    <h1>你的公网IP是:{{ $publicIp }}</h1>
  </div>
</template>
相关推荐
GuokLiu2 小时前
250708-Svelte项目从Debian迁移到无法联网的RHEL全流程指南
npm·svelte
01传说5 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
kfepiza8 小时前
Netplan 中 bridges、bonds、ethernets、vlans 之间的关系 笔记250711
linux·tcp/ip·shell
程序小武10 小时前
网络请求的基本概念、原理及生活化解析
网络协议
kfepiza10 小时前
Netplan 配置网桥(Bridge)的模板笔记250711
linux·tcp/ip·ubuntu
hrrrrb11 小时前
【TCP/IP】11. IP 组播
服务器·网络·tcp/ip
甘露寺11 小时前
HTTP 请求体类型详解:选择最适合的数据提交格式
网络·网络协议·http
傻啦嘿哟11 小时前
长效住宅代理IP:反爬虫战场上的隐形盾牌
爬虫·网络协议·tcp/ip
hrrrrb13 小时前
【TCP/IP】7. IP 路由
网络·tcp/ip·智能路由器
三体世界15 小时前
TCP传输控制层协议深入理解
linux·服务器·开发语言·网络·c++·网络协议·tcp/ip