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

前端白袍2025-01-28 2:06

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