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

目录
- 一、安装public-ip包
- 1.在Vue组件中使用
- 2.在Nuxt.js插件中使用public-ip
一、安装public-ip包
npm install public-ip
1.在Vue组件中使用
你可以在Nuxt.js的任意组件或者插件中使用public-ip来获取公网IP。下面是在一个Vue组件中如何使用它的例子:
<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或IPv6console.log(await publicIpv6()); // IPv6console.log(await publicIpv4()); // IPv4try {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:
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公网IPinject('publicIp', ip); // 注入公网IP到Vue实例中,可以通过this.$publicIp访问} catch (err) {console.error('无法获取公网IP', err);}
};
(2)在nuxt.config.js文件中注册这个插件:
export default {plugins: ['~/plugins/public-ip' // 确保路径正确,根据你的项目结构调整路径],
}
(3)在组件中使用注入的公网IP:
<template><div><h1>你的公网IP是:{{ $publicIp }}</h1></div>
</template>
相关文章:
Nuxt:利用public-ip这个npm包来获取公网IP
目录 一、安装public-ip包1.在Vue组件中使用2.在Nuxt.js插件中使用public-ip 一、安装public-ip包 npm install public-ip1.在Vue组件中使用 你可以在Nuxt.js的任意组件或者插件中使用public-ip来获取公网IP。下面是在一个Vue组件中如何使用它的例子: <template…...
babylon.js-3:了解STL网格模型
网格模型上色 本篇文章主要介绍如何在 BabylonJS 中实现STL网格模型上色。 文章目录 网格模型上色运用场景概要延申正文加载器库的支持认识 OBJ 和 STL 文件GUI 色板选择器网格模型异步加载加载动画网格模型上色官方即将弃用 ImportMesh 而推荐使用 ImportMeshAsync 说明OBJ …...
基于SpringBoot的假期周边游平台的设计与实现(源码+SQL脚本+LW+部署讲解等)
专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…...
【MySQL】初始MySQL、库与表的操作
目录 基本使用 使用案例 SQL分类 存储引擎 库的操作 字符集和校验规则 查看系统默认字符集和校验规则 查看数据库支持的字符集 查看数据库支持的字符集校验规则 指定编码常见数据库 校验规则对数据库的影响 操纵数据库 库的备份与恢复 表的操作 创建表 查看表 …...
将DeepSeek接入Word,打造AI办公助手
最近,DeepSeek热度一路高涨,成为AI领域的焦点。通过开放的API,我们可以将DeepSeek接入Word,直接进行AI对话。更进一步,还能利用DeepSeek辅助修改文档,甚至提出一些排版建议。 Word报告工具已经新增“DeepS…...
Coze,Dify,FastGPT,对比
在当今 AI 技术迅速发展的背景下,AI Agent 智能体成为了关键领域,Coze、Dify 和 FastGPT 作为其中的佼佼者,各有千秋。 平台介绍 - FastGPT:由环界云计算公司发起,是基于大语言模型(LLM)的开源…...
Kafka 日志存储 — 磁盘存储
Kafka 依赖与磁盘来存储和缓存消息,采用文件追加的方式来写入消息。顺序写盘的速度快于随机写内存。 1 磁盘存储 除顺序写入外,Kafka中大量使用了页缓存、零拷贝等技术来进一步提升吞吐性能。 1.1 页缓存 页缓存是操作系统实现的一种磁盘缓存&#x…...
996引擎 - NPC-添加NPC引擎自带形象
996引擎 - NPC-添加NPC引擎自带形象 截图参考添加NPC参考资料截图参考 添加NPC 编辑NPC表:Envir\DATA\cfg_npclist.xls 1.1. 需要临时隐藏NPC时可以在id前加 // 1.2. 如果NPC朝向不对,可以调整dir 列。(按8方向,上是0顺时针数。我这里给的4) 1.3. 形象代码:NPC代码、怪物…...
GL C++显示相机YUV视频数据使用帧缓冲FBO后期处理,实现滤镜功能。
一.前言: GitHub地址:GitHub - wangyongyao1989/WyFFmpeg: 音视频相关基础实现 系列文章: 1. OpenGL Texture C 预览Camera视频; 2. OpenGL Texture C Camera Filter滤镜; 3. OpenGL 自定义SurfaceView Texture C预览Camera视…...
【hot100】刷题记录(7)-除自身数组以外的乘积
题目描述: 给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#x…...
解决.NET程序通过网盘传到Linux和macOS不能运行的问题
问题描述:.net程序用U盘传到虚拟机macOS和Linux可以正常运行,但是网盘传过去就不行。 解决方法: 这是文件权限的问题。当你通过U盘将文件传输到虚拟机的macOS和Linux系统时,文件的权限和所有权可能得到了保留或正确设置。但如果…...
练习(复习)
大家好,今天我们来做几道简单的选择题目来巩固一下最近学习的知识,以便我们接下来更好的学习。 这道题比较简单,我们前面学过,在Java中,一个类只能继承一个父类,但是一个父类可以有多个子类,一个…...
Class2(2020):Shell基础(二)——Shell脚本设计基础
本系列博客为MIT的《Missing in CS Class》的课程笔记。 Class2(2020):Shell基础(二)——Shell脚本设计基础 注:若无特殊说明,本文中带有[]的部分均为可选参数。 脚本文件 脚本语言为解释执行,其运行需有解释器,如Python。Shel…...
HBase-2.5.10 伪分布式环境搭建【Mac】
文章目录 前言一、搭建单节点Zookeeper1. 解压zookeeper2. 配置环境变量3. 修改配置文件4. 启动zk 二、搭建伪分布式Hbase1. 解压hbase2. 配置环境变量3. 修改配置4. 启动HBase 前言 搭建hbase伪分布式环境 提示:以下是本篇文章正文内容,下面案例仅供参…...
计算机毕业设计Python+CNN卷积神经网络高考推荐系统 高考分数线预测 高考爬虫 协同过滤推荐算法 Vue.js Django Hadoop 大数据毕设
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
macos的图标过大,这是因为有自己的设计规范
苹果官方链接:App 图标 | Apple Developer Documentation 这个在官方文档里有说明,并且提供了sketch 和 ps 的模板。 figma还提供了模板: Figma...
2025_1_29 C语言学习中关于指针
1. 指针 指针就是存储的变量的地址,指针变量就是指针的变量。 1.1 空指针 当定义一个指针没有明确指向内容时,就可以将他设置为空指针 int* p NULL;这样对空指针的操作就会使程序崩溃而不会导致出现未定义行为,因为程序崩溃是宏观的&…...
解决ImportError: cannot import name ‘notf‘
解决ImportError: cannot import name ‘notf‘ 报错: 报错代码: from torch.utils.tensorboard import SummaryWriter cannot import name notf from tensorboard.compat 解决方法: pip install numpy1.26.0 测试代码: py…...
HTML<label>标签
例子 三个带标签的单选按钮: <form action"/action_page.php"> <input type"radio" id"html" name"fav_language" value"HTML"> <label for"html">HTML</label><br&…...
shiro学习五:使用springboot整合shiro。在前面学习四的基础上,增加shiro的缓存机制,源码讲解:认证缓存、授权缓存。
文章目录 前言1. 直接上代码最后在讲解1.1 新增的pom依赖1.2 RedisCache.java1.3 RedisCacheManager.java1.4 jwt的三个类1.5 ShiroConfig.java新增Bean 2. 源码讲解。2.1 shiro 缓存的代码流程。2.2 缓存流程2.2.1 认证和授权简述2.2.2 AuthenticatingRealm.getAuthentication…...
高效对接Tiktok电商API:PHP开发者的一站式解决方案指南
高效对接Tiktok电商API:PHP开发者的一站式解决方案指南 【免费下载链接】tiktokshop-php Unofficial Tiktok Shop API Client in PHP. Use API version 202309 and later 项目地址: https://gitcode.com/gh_mirrors/ti/tiktokshop-php 在瞬息万变的电商生态中…...
数据清洗避坑指南:缺失值和异常值处理的5个常见错误(附真实案例)
数据清洗避坑指南:缺失值和异常值处理的5个常见错误(附真实案例) 在电商平台的用户行为分析中,我们曾遇到一个诡异现象:某促销活动页面的转化率突然飙升到98%。进一步排查发现,是爬虫程序将未加载完成的页…...
零基础入门esp32开发:用快马平台生成第一个led控制程序详解
最近在学ESP32开发,发现对于新手来说,从零开始写代码还是挺有挑战的。不过我发现了一个超好用的工具——InsCode(快马)平台,它可以根据你的需求直接生成可运行的代码,特别适合像我这样的初学者。 项目需求分析 我想实现一个简单的…...
5分钟搞定fastANI安装与基因组比对:从conda安装到结果解读全流程
5分钟搞定fastANI安装与基因组比对:从conda安装到结果解读全流程 第一次接触基因组比对时,我被各种复杂的参数和晦涩的结果文件搞得晕头转向。直到发现了fastANI这个神器——它不仅能快速计算基因组间的平均核苷酸相似性(ANI)&am…...
【Python AI 工具实战宝典】:20个高复用AI用例+开箱即用代码模板,限时开源库清单泄露!
第一章:Python AI 工具生态全景与实战价值定位Python 已成为人工智能开发的事实标准语言,其核心优势不在于单一库的性能,而在于高度协同、分层清晰的工具生态体系。从底层计算(NumPy、CuPy)、模型构建(PyTo…...
2025年开源工具jable-download:视频下载工具高效解决方案
2025年开源工具jable-download:视频下载工具高效解决方案 【免费下载链接】jable-download 方便下载jable的小工具 项目地址: https://gitcode.com/gh_mirrors/ja/jable-download 在数字化内容消费日益增长的今天,视频资源的获取与保存成为许多用…...
造相-Z-Image-Turbo亚洲美女LoRA创作实战:三个案例教你玩转AI绘画
造相-Z-Image-Turbo亚洲美女LoRA创作实战:三个案例教你玩转AI绘画 1. 认识造相-Z-Image-Turbo与亚洲美女LoRA 造相-Z-Image-Turbo是一款强大的AI图片生成模型,而亚洲美女LoRA则是专门针对亚洲人物特征优化的风格适配器。这个组合让普通用户也能轻松创作…...
告别‘阴阳屏’:深入MTK平台PQ底层,教你用代码实现多供应商屏幕色彩统一
MTK平台屏幕色彩统一实战:从Gamma参数调试到自动化加载 当你的项目同时采用三家不同供应商的屏幕模组时,用户滑动屏幕时可能看到三种截然不同的白色——这种"阴阳屏"现象在硬件采购多元化的今天越来越普遍。作为深耕显示领域多年的工程师&…...
Python子解释器隔离全解密(从PyThreadState到_PyInterpreterState):20年源码级剖析,首次公开CPython内部隔离边界图谱
第一章:Python子解释器隔离的演进脉络与核心挑战Python长期以来依赖全局解释器锁(GIL)保障线程安全,但这也限制了真正的并行执行能力。为突破这一瓶颈,CPython自3.12起正式引入子解释器(subinterpreters&am…...
ROS2新手必看:用turtlesim小乌龟快速入门机器人仿真(附完整安装指南)
ROS2实战入门:从turtlesim小乌龟探索机器人仿真世界 引言:为什么选择turtlesim作为ROS2的起点? 在机器人操作系统(ROS)的学习道路上,很多开发者都会遇到一个共同的困境:理论概念抽象难懂,而直接上手复杂项…...
