网站建设题目厦门人才网个人会员

一、安装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>