一、前言
到目前为止，这个项目已经做了有小半个月了，文章也更新了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小时开始。欢迎在评论区分享你的进展或遇到的卡点，我会逐一查看，尽可能的帮助解决。我们下一篇文章见！