Nuxt Cloudflare Web Analytics 模块

将 Cloudflare Web Analytics 添加到您的 Nuxt 项目中。高于 1.0.8+ 的最新版本适用于 Nuxt 3，如果您想使用 nuxt 2，请使用 0.1.5

注意：此模块在开发模式下未启用。您可以在开发模式下将环境变量 NODE_ENV 设置为 production 进行测试。

设置

使用 yarn 或 npm 将 nuxt-cloudflare-analytics 依赖项添加到您的项目中 npm i nuxt-cloudflare-analytics 或 yarn install nuxt-cloudflare-analytics
将 nuxt-cloudflare-analytics 添加到 nuxt.config.ts 文件的 modules 部分

{
  // either
  modules: [
    [
      'nuxt-cloudflare-analytics',
      {
        // See below for more options
        token: 'your-token', // Example 1a2b3v4a5er6ac7r8afd
      },
    ],
  ]

  // or
  modules: [
    'nuxt-cloudflare-analytics'
  ],
  cloudflareAnalytics: {
    // See below for more options
    token: 'your-token', // Example 1a2b3v4a5er6ac7r8afd
  }
}

您可以在 Cloudflare 仪表板的 Web Analytics 页面上找到令牌。

选项

`token` (!字符串)

必需
Cloudflare 分析令牌，例如：1a2b3v4a5er6ac7r8afd

`scriptPath` (字符串 | false | 未定义)

(可选)，默认为 /_ca/b.js。这是来自 cloudflare 的 beacon.min.js。
您可以将其设置为 false 以不使用本地脚本，而是使用 CDN 脚本 (https://static.cloudflareinsights.com/beacon.min.js)。不过，不建议这样做，因为某些浏览器可能无法加载此脚本。
您可以将其设置为自定义路径以定义本地脚本的位置。这**必须**是您 public 文件夹内的 .js 文件。因此，如果您在 public/my/beacon.js 下有此文件，则应将此选项设置为 my/beacon.js。

`proxyPath` (字符串 | false | 未定义)

(可选)，默认为 false。
您可以将其设置为自定义路径以生成代理 nuxt 服务器 API 端点。这**必须**以 /api 开头。例如，将 proxyPath 设置为 /api/_ca/p，则模块将自动
- 生成此端点
- 更改 scriptPath 以使用此端点（只要您不将其设置为自己的端点）
自动创建的代理端点用于将数据发送到 Cloudflare。
- 好处：这避免了一些浏览器阻止此请求。
- 缺点：根据您托管页面的位置，Cloudflare 会将此国家/地区作为页面点击的来源。因此，如果您在美国托管您的页面（例如 Vercel），但您的访问者来自德国，您将在仪表板中看到美国作为点击的来源。
您可以将其设置为 false 以不使用代理并直接调用 Cloudflare。请做好一些浏览器可能会阻止请求并且您看不到任何数据的准备。
如果您有其他解决方案，例如 Vercel 的重写配置，请将 proxyPath 设置为 false 并定义一个 customProxyPath（请参见下文）。

`customProxyPath` (字符串 | 未定义)

(可选)，默认为 undefined。仅当您将 proxyPath 设置为 false 时才定义此选项。
这是您自定义代理端点的路径，例如来自 Vercel 的重写配置。
例如

// nuxt.config.ts
{
  cloudflareAnalytics: {
    token: 'your-token', // Example 1a2b3v4a5er6ac7r8afd
    proxyPath: false,
    customProxyPath: '/my-proxy'
  }
}

// vercel.json
{
    "rewrites": [{ "source": "/my-proxy", "destination": "https://cloudflareinsights.com/cdn-cgi/rum" }]
}

贡献者

hamlogic (https://github.com/hamlogic)
madebyfabian (https://github.com/madebyfabian)

许可证

MIT © Hamjs

开发

克隆仓库
安装依赖项
切换到 接管模式
使用 npm run dev:prepare 确保生成本地文件
使用 npm run dev 启动游乐场
阅读此文档以了解有关 Nuxt 模块的更多信息：https://nuxtjs.org.cn/docs/guide/going-further/modules