# @fingerprintjs/fingerprintjs-pro-vue-v3 中文文档

规范地址：https://npmcn.com/package/%40fingerprintjs/fingerprintjs-pro-vue-v3/

版本：1\.5\.0
npm 元数据更新时间：2024-07-25T13:21:35.149Z
中文译文更新时间：2026-11-14T18:49:45.896Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fingerprintjs/fingerprintjs-pro-vue-v3
原文对照：https://npmcn.com/package/%40fingerprintjs/fingerprintjs-pro-vue-v3/?lang=original
项目主页：https://github.com/fingerprintjs/fingerprintjs-pro-vue#readme
源码仓库：https://github.com/fingerprintjs/fingerprintjs-pro-vue

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：95.7 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：vue ^3\.1
- 首次发布：2022-06-13T06:54:42.633Z
- 最新版本发布：2024-03-25T11:21:15.402Z
- 近 30 天下载量：11662（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 0 个）

## 中文简介

Vue v3 的指纹 Pro 插件

## 安装

```sh
npm install @fingerprintjs/fingerprintjs-pro-vue-v3
```

也可以使用：`pnpm add @fingerprintjs/fingerprintjs-pro-vue-v3`、`yarn add @fingerprintjs/fingerprintjs-pro-vue-v3`、`bun add @fingerprintjs/fingerprintjs-pro-vue-v3`

## README

[![Fingerprint logo](https://raw.githubusercontent.com/fingerprintjs/fingerprint-pro-server-api-go-sdk/main/res/logo_dark.svg)](https://fingerprint.com/)

[![Build status](https://github.com/fingerprintjs/fingerprintjs-pro-vue/actions/workflows/ci.yml/badge.svg)](https://github.com/fingerprintjs/fingerprintjs-pro-vue/actions/workflows/ci.yml) [![Release status](https://github.com/fingerprintjs/fingerprintjs-pro-vue/actions/workflows/release.yml/badge.svg)](https://github.com/fingerprintjs/fingerprintjs-pro-vue/actions/workflows/release.yml) [![Current NPM version](https://img.shields.io/npm/v/@fingerprintjs/fingerprintjs-pro-vue-v3.svg)](https://www.npmjs.com/package/@fingerprintjs/fingerprintjs-pro-vue-v3) [![Monthly downloads from NPM](https://img.shields.io/npm/dm/@fingerprintjs/fingerprintjs-pro-vue-v3.svg)](https://www.npmjs.com/package/@fingerprintjs/fingerprintjs-pro-vue-v3) [![MIT license](https://img.shields.io/:license-mit-blue.svg)](https://opensource.org/licenses/MIT) [![Discord server](https://img.shields.io/discord/852099967190433792?style=logo&label=Discord&logo=Discord&logoColor=white)](https://discord.gg/39EpE2neBg)

# 指纹 Pro Vue 3 SDK

[指纹](https://fingerprint.com/) 提供99.5%的准确访客身份.

指纹 Pro Vue SDK是方便的集成方式 [指纹 Pro](https://fingerprint.com/) 输入您的 Vue 3 应用程序。 它支持指纹JavaScript代理的所有能力,并提供内置的缓存机制.

## 所需资源

-   对于打字机用户:打字机4.5或以上
-   Vue 3.1级或以上
-   对于 Nuxt 用户: Nuxt 3.0 以上

这个软件包与Fingerprint Pro合作,它与源可得到的FingerprintJS不兼容. 看我们的文件 了解更多关于 [指纹 Pro 和来源可用的指纹的区别](https://dev.fingerprint.com/docs/pro-vs-open-source)。 。 。 .

> 我们不再为Vue2提供SDK, [由于支助终止](https://v2.vuejs.org/eol/)我们建议升级到Vue 3.

## 安装

要安装插件运行 :

```shell
yarn add @fingerprintjs/fingerprintjs-pro-vue-v3
```

或者说:

```shell
npm install @fingerprintjs/fingerprintjs-pro-vue-v3
```

```shell
pnpm add @fingerprintjs/fingerprintjs-pro-vue-v3
```

## 开始

要识别访客,你需要指纹 Pro账户(你) 能够 [免费报名](https://dashboard.fingerprint.com/signup/)) (中文(简体) ). 获取您的 API 密钥并启动 [指纹 Pro 文档](https://dev.fingerprint.com/docs/quick-start-guide)。 。 。 .

在您的 Vue 应用程序中注册我们的插件 .

-   设置 a [区域](https://dev.fingerprint.com/docs/regions) 如果您在注册时选择了非全球区域.
-   设定 `endpoint` 财务报告和审定财务报表 `scriptUrlPattern` 如果你使用我们的代理集成 [提高准确性和有效性](https://dev.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers) 游客身份证明.

```typescript
import { createApp } from 'vue';
import App from './App.vue';
import {
  fpjsPlugin,
  FpjsVueOptions,
  // defaultEndpoint,
  // defaultScriptUrlPattern,
} from '@fingerprintjs/fingerprintjs-pro-vue-v3';

const app = createApp(App);

const apiKey = '<public-api-key>'

app
  .use(fpjsPlugin, {
    loadOptions: {
      apiKey: '<your-public-api-key>',
      // region: 'eu',
      // endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
      // scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
    },
  } as FpjsVueOptions)
  .mount('#app');

```

您可以使用配置 API 、 选项 API 或 Mixins 的插件, 无论是否 Nuxt 。 见下文使用实例.

## 组成 API

插件提供了一个 `useVisitorData` 用于识别访问者的函数 :

```vue
<script setup>
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-vue-v3';
import { watch } from 'vue';

const { data, error, isLoading, getData } = useVisitorData(
  { extendedResult: true }, 
  // Set to true to fetch data on mount
  { immediate: false }
);

watch(data, (currentData) => {
  if (currentData) {
    // Do something with the data
  }
});
</script>

<template>
  <button @click='getData'>Get visitor data</button>
</template>

```

## 选项 API

插件注入 a `$fpjs` 用于识别访客的组件中的对象 :

```vue

<script lang='ts'>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    async getVisitorData() {
      const visitorData = await this.$fpjs.getVisitorData({
        extendedResult: true
      });

      // Do something with visitorData
    }
  }
});
</script>

<template>
  <button @click='getVisitorData'>Get visitor data</button>
</template> 
```

### 混合

为了方便,我们还提供处理所有查询状态的混音器.

延长的结果:

```vue

<script lang='ts'>
import { defineComponent } from 'vue';
import { fpjsGetVisitorDataExtendedMixin } from '@fingerprintjs/fingerprintjs-pro-vue-v3';

export default defineComponent({
  // Include our mixin
  mixins: [fpjsGetVisitorDataExtendedMixin],
  async mounted() {
    // You can also fetch data on mount
    // await this.$getVisitorDataExtended();
  }
});
</script>

<template>
  <div>
    <button @click='$getVisitorDataExtended'>
      Get visitor data
    </button>
    <span v-if='visitorDataExtended.isLoading'>
      Loading...
    </span>
    <span v-else-if='visitorDataExtended.isError'>
      Error: {{ visitorDataExtended.error }}
    </span>
    <span v-else>
      <!--Do something with visitorData here-->
    </span>
  </div>
</template>
```

默认结果 :

```vue

<script lang='ts'>
import { defineComponent } from 'vue';
import { fpjsGetVisitorDataMixin } from '@fingerprintjs/fingerprintjs-pro-vue-v3';

export default defineComponent({
  // Include our mixin
  mixins: [fpjsGetVisitorDataMixin],
  async mounted() {
    // You can also fetch data on mount
    // await this.$getVisitorData();
  }
});
</script>

<template>
  <div>
    <button @click='$getVisitorData'>
      Get visitor data
    </button>
    <span v-if='visitorData.isLoading'>
      Loading...
    </span>
    <span v-else-if='visitorData.isError'>
      Error: {{ visitorData.error }}
    </span>
    <span v-else>
      <!--Do something with visitorData here-->
    </span>
  </div>
</template>
```

## 坚果

插件与 Nuxt 在框外工作, 然而, 您只需要在客户端注册它 .

```typescript
// plugins/fingerprintjs.client.ts
import { defineNuxtPlugin, useRuntimeConfig } from '#app';
import {
  fpjsPlugin,
  FpjsVueOptions,
  // defaultEndpoint,
  // defaultScriptUrlPattern,
} from '@fingerprintjs/fingerprintjs-pro-vue-v3';

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();

  nuxtApp.vueApp.use(fpjsPlugin, {
    loadOptions: {
      apiKey: config.public.API_KEY,
      // region: 'eu',
      // endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
      // scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
    },
  } as FpjsVueOptions);
});
```

```typescript
//nuxt.config.ts

import { defineNuxtConfig } from 'nuxt';
import path from 'path';

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // Inject Fingerprint Pro API key
      API_KEY: process.env.API_KEY,
    },
  }
});
```

见 [实例 Nuxt 应用程序](https://npmcn.com/package/%40fingerprintjs/fingerprintjs-pro-vue-v3/examples/nuxt-v3-example) 更多细节.

## 链接和标记信息

这个 `visitorId` 由指纹识别提供,与您已经了解的用户信息相结合,例如账户ID,订单ID等,尤其有用. 更多地了解《公约》的各种应用 `linkedId` 财务报告和审定财务报表 `tag`,参见 [链接和标记信息](https://dev.fingerprint.com/docs/tagging-information)。 。 。 .

将你的数据与访问者身份相连接 `linkedId` 或者说 `tag` 选项对象的参数 `useVisitorData()` 钩子或 `getData` 函数 :

```vue
<script setup>
 import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-vue-v3';

 const { data, error, isLoading, getData } = useVisitorData({
  linkedId: 'user_1234',
  tag: {
   userAction: 'login',
   analyticsId: 'UA-5555-1111-1',
  },
 })
</script>

<template>
<!--...-->
</template>
```

## 文档

详细文档可在 [API 参考](https://fingerprintjs.github.io/fingerprintjs-pro-vue)。 。 。 .

## 藏匿战略

指纹 Pro使用费按API呼叫计费. 为了避免不必要的API呼叫 [缓存识别结果](https://dev.fingerprint.com/docs/caching-visitor-information)。默认情况下, SDK 使用 `sessionStorage` 到缓存结果.

-   指定 `cacheLocation` 内 `FpjsVueOptions` 将结果存储到 `memory` 或者说 `localStorage`启用 `none` 完全禁用缓存.
-   指定 `cache` 内 `FpjsVueOptions` 来使用您的自定义缓存执行。 详情见 [创建自定义缓存](https://github.com/fingerprintjs/fingerprintjs-pro-spa#creating-a-custom-cache) 在指纹 Pro SPA 寄存器中(这个 SDK 使用的下等指纹库).
-   过 `{ignoreCache: true}` 页:1 `getData()`编号 :`getVisitorData()`编号 :`getVisitorDataExtended()` 函数以忽略特定 API 调用时的缓存结果.

> \[注\] 如果您使用来自 [`extendedResult`](https://dev.fingerprint.com/docs/js-agent#extendedresult)注意你的隐蔽策略. 一些领域,例如, `ip` 或者说 `lastSeenAt`,可能会随着时间而改变 同一访客。 使用 `getData({ ignoreCache: true })` 以获取最新的识别结果.

## 支助和反馈

提问或提供反馈,使用 [问题](https://github.com/fingerprintjs/fingerprintjs-pro-vue/issues)如果您需要私人支援,请发电子邮件至 `oss-support@fingerprint.com`如果你想有一个类似的 Vue 包装器 [开源指纹JS](https://github.com/fingerprintjs/fingerprintjs),考虑在主要方面创建一个问题 [指纹JS仓库](https://github.com/fingerprintjs/fingerprintjs/issues)。 。 。 .

## 实例

您可以在 [实例](https://npmcn.com/package/%40fingerprintjs/fingerprintjs-pro-vue-v3/examples) 目录 :

-   [SPA 应用程序](https://npmcn.com/package/%40fingerprintjs/fingerprintjs-pro-vue-v3/examples/spa-v3-example)
-   [Nuxt 应用程序](https://npmcn.com/package/%40fingerprintjs/fingerprintjs-pro-vue-v3/examples/nuxt-v3-example)

## 许可证

本项目根据以下规定获得许可证: [麻省理工学院许可证](https://github.com/fingerprintjs/fingerprintjs-pro-vue/blob/main/LICENSE)。 。 。 .

## 常见问题

### @fingerprintjs/fingerprintjs-pro-vue-v3 是什么？

Vue v3 的指纹 Pro 插件

### 如何安装 @fingerprintjs/fingerprintjs-pro-vue-v3？

在项目目录运行 npm install @fingerprintjs/fingerprintjs-pro-vue-v3，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fingerprintjs/fingerprintjs-pro-vue-v3 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fingerprintjs/fingerprintjs-pro-vue-v3 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fingerprintjs/fingerprintjs-pro-vue-v3 可以商用吗？

@fingerprintjs/fingerprintjs-pro-vue-v3 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fingerprintjs/fingerprintjs-pro-vue-v3 的下载量有多少？

根据 npm 官方下载统计，@fingerprintjs/fingerprintjs-pro-vue-v3 在 2026/10/15 – 2026/11/13 这 30 天内被下载 11,662 次，日均约 389 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fingerprintjs/fingerprintjs-pro-vue-v3 还在维护吗？

最新版本 1\.5\.0 发布于 2024/03/25（2 年前）；至今共发布 16 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/06/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。