Day 11：集成百度统计以监控站点流量

一、前言

到目前为止，这个项目已经做了有小半个月了，文章也更新了10来篇，突然想要知道一下我的站点到底有没有人访问过，原先我是打算等博客模块做完的，但是灵光一闪，想到了这个，我这个人有个毛病就是想一出是一出，所以我决定先把这个弄上。

当然实现方式有很多，最简单的就是自己在nginx层进行埋点，监控，但是多多少少还是要点工作量的，也不利于数据统计，分析，如果要做一整套，那得花不少精力，当前阶段不值当。

所以我决定先整合上百度统计，有个大致的了解。

二、百度统计整合

点击工具菜单 --> 选择数据站点分类 --> 看到百度统计，点击使用工具即可进入页面

点击进入产品，接下来就是注册登录了。

个人的话用百度账号登录就可以了。

进入页面后，点击使用设置，这里有详细的使用教程，我建议是自己跟着教程来就好。

但是既然我写了这篇文章，我还是要把步骤走一遍的。

1. 创建站点

在自有网站tab栏下点击，新增站点

根据提示要求，填写好，点击确定

2. 获取代码

之后会进入这个页面，或者自己在左侧菜单栏中找到，代码管理-->代码获取

获取统计代码

3. 项目中引入

这里有几种方式，我这里使用插件方式，因为在本地开发的时候我希望他不要统计

各种方式对比（由AI给出）

方法	是否推荐	适用场景	说明
`useHead()` + `script[src]`	✅ 强烈推荐	所有模式	最标准、兼容 SSR/SSG/SPA
插件方式 (`plugins/baidu-tongji.client.js`)	✅ 推荐	多环境/团队项目	封装好，逻辑分离
手动在 `app.vue` 用 `onMounted` 动态添加	✅ 可用	快速调试	控制灵活
直接 `<script src="..." defer>` 写在模板	⚠️ 仅限 SPA	SPA 模式	简单粗暴，但 SSR 下有风险

📌 建议选择

如果你是新手或想最快搞定 → 选 方法一（useHead）
如果你禁用了 SSR（SPA 模式）→ 可以直接写 <script> 标签
如果你想集中管理第三方脚本 → 使用 plugins/*.client.js

三、以插件方式整合百度统计

1. 创建插件文件 `plugins/baidu-tongji.client.js`

javascript 复制代码

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  const baiduToken = config.public.baiduTongjiToken
  
  // 如果没有配置 token，或不是生产环境，则不加载
  if (!baiduToken) return // 必须配置 token
  if (!process.client) return // 防止 SSR 报错, 必须在客户端
  if (!import.meta.env.PROD) return // 只在生产环境启用

  // 标记是否已加载，防止重复加载
  if (window._bdStatLoaded) return
  window._bdStatLoaded = true

  // 初始化 _hmt 数组
  window._hmt = window._hmt || []

  // 创建百度统计脚本
  const script = document.createElement('script')
  script.src = `https://hm.baidu.com/hm.js?${baiduToken}`
  script.defer = true
  script.async = false
  script.setAttribute('data-pid', 'baidu-tongji')

  document.head.appendChild(script)

  // 获取当前页面路径并发送首次 PV
  const sendPageView = () => {
    const path = location.pathname + location.search
    window._hmt.push(['_trackPageview', path])
  }

  // 等待脚本加载完成后再发送 PV
  script.onload = () => {
    // 首次进入页面上报 PV
    sendPageView()

    // 监听路由变化，上报后续 PV（适用于 SPA）
    nuxtApp.hook('page:finish', () => {
      // 路由切换完成后上报新页面 PV
      setTimeout(sendPageView, 100) // 小延迟确保 DOM 更新
    })
  }

  // 错误处理
  script.onerror = () => {
    console.warn('[Baidu Tongji] Failed to load hm.js')
    window._bdStatLoaded = false
  }
})

2. 配置 Token（推荐使用环境变量）

创建 .env 文件

定义好环境变量NUXT_PUBLIC_BAIDU_TONGJI_TOKEN=abc123def456xxxxx

token 换成你自己百度统计中代码中的

🔐 注意：不要把 token 提交到 Git，记得将 .env 加入 .gitignore

bash 复制代码

# Local env files
.env
.env.*
!.env.example

在 nuxt.config.ts 中声明，默认留空或设默认值

javascript 复制代码

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // 声明这个配置项存在，实际值来自 .env
      baiduTongjiToken: '', // ← 留空，由 NUXT_PUBLIC_BAIDU_TONGJI_TOKEN 注入
    }
  }
})

3. 验证是否生效

这里为了本地测试，先把插件中的 if (!import.meta.env.PROD) return // 只在生产环境启用 这行代码注释掉。

启动项目：
打开浏览器开发者工具查看 Network 是否请求了 hm.js?xxx
登录百度统计后台，查看实时访客数据。

然后就可以看到具体的行为了

四、总结

这样对于我们的站点流量有了一个大概得了解。为后续接推广提供一下数据支撑。

千里之行，始于足下。你的"个人公司"从这第一个2小时开始。欢迎在评论区分享你的进展或遇到的卡点，我会逐一查看，尽可能的帮助解决。我们下一篇文章见！