vuepress 绑定百度统计

本篇教程适用于vuepress2版本

注册百度统计
https://tongji.baidu.com/
注册成功后，打开网站列表
https://tongji.baidu.com/main/setting/10000320023/home/site/index
如下，新增网站配置

新增站点

获取代码 ，插入博客中，用于站点与百度统计互联

配置流程如下：

注意

注意！
在配置统计代码时，查看了多个教程，都是以代码块的方式配置，但是本地运行创建标签出错，导致统计代码运行失败

module.exports = {
    head: [
      [
        'script', {}, `
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
        </script>        
        `
      ]
    ]
}

经过尝试后，直接使用vuepress中的head配置，来生成一个script标签，插入header中即可，不存在异步创建标签问题。

export default defineUserConfig({
  head: [
    [
      'script', {
        type:'text/javascript',
        src:'https://hm.baidu.com/hm.js?ff5e95667789a353e9be4e467e13ff3a'
      }, 
    ]
  ]
})

head配置参数
第一个参数：标签名称 -script标签
第二个参数：标签配置项- type类型为'text/javascript'，src为百度统计代码访问地址
第三个三次：代码块 、可忽略

检测效果
注意，通过js方式链接百度统计，代码检查无法检查到
官方说法：

• .如果通过js文件调用的方式安装统计代码，由于无法直接在网站页面中找到统计代码，会提示“未检测到代码”，建议您使用 百度统计助手 进行检测；

需要通过百度统计助手检测，安装地址→
安装插件后检测，此时提示站点已安装统计助手，咱们后续登录百度统计后台，就能查看博客数据啦

等待

1.4 等待

如果百度统计插件助手提示安装成功，一般需等待20分钟左右，可登录后台查看数据
注意！以js方式介入百度统计，代码安装检测无法识别
没关系，百度插件助手提示接入成功就行，
如下，打开统计后台，咱们就能看到本地访问的实时记录

完成以上步骤，算是接入百度统计50%了
注意！vuepress是 以vue框架开的一个单应用程序，在切换路由时不会触发页面渲染，导致咱们访问文章页时因无法触发百度统计，当如何解决此问题呢？
通过vue的路由守卫，在路由切换时，手动上报百度统计。

在查阅文档时，我发现不少博主是用vuepress1建站，创建enhanceapp.js 来设置路由守卫，此方式在vuepress2.0无效
官网解释

#.vuepress/enhanceApp.js

重命名为 .vuepress/client.{js,ts} ，使用方法也有改动。
参考 深入 > Cookbook > 客户端配置的使用方法 。

亲测踩坑，勿用！VuePress 文档的基本配置中，介绍了一个应用级别的配置：

由于 VuePress 是一个标准的 Vue 应用，你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：

代码如下：

export default ({ router }) => {
    router.beforeEach((to, from, next) => {
      if (typeof _hmt !== "undefined") {
        if (to.path) {
          _hmt.push(["_trackPageview", to.fullPath]);
        }
      }
      
      next();
    });
  };

客户端配置路由守卫

vuepres2.0版本，需要额外客户端配置，创建文件.vuepress/client.js
在客户端配置中添加路由守卫，代码如下：

import { defineClientConfig } from "@vuepress/client";
console.log('路由守卫了')
export default defineClientConfig({
  enhance({ router }) {
      router.beforeEach((to, from, next) => {
      console.log("切换路由", to.fullPath, from.fullPath);
  
      //触发百度的pv统计
      if (typeof _hmt != "undefined") {
        if (to.path) {
          _hmt.push(["_trackPageview", to.fullPath]);
          console.log("上报百度统计", to.fullPath);
        }
      }
      // continue
      next();
    });
  },
});

路由守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 一定要调用该方法来 resolve 这个钩子

提示
切换路由时会触发统计上报。以下行为时会上报统计:

• 首次访问
• 刷新页面
• 切换到当前文章的其它章节
  切换锚点，URL 会变化，所以会触发路由变化事件。
  所以，当用户完整得浏览完一篇博客时，可能会触发多次上报。

总结
接入百度统计，本质是在访问站点时触发百度统计api。