# 在VuePress项目中添加百度统计代码

## 背景

VuePress是Vue驱动的静态网站生成器，如果想知道VuePress生成的网站每天的访问情况而又不想为它开发后台，最好就是引用外部统计脚本，本文选择百度统计平台。

## 获取统计代码

百度统计平台地址： <https://tongji.baidu.com>

登录后先创建站点，然后就可以获取统计代码，得到的统计代码示例：

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

同时，在百度统计的代码获取页中还有一段说明，原文如下：

```text
代码安装说明

1. 请将代码添加到网站全部页面的</head>标签前。
2. 建议在header.htm类似的页头模板页面中安装，以达到一处安装，全站皆有的效果。
3. 如需在JS文件中调用统计分析代码，请直接去掉以下代码首尾的，<script type="text/javascript">与</script>后，放入JS文件中即可。

如果代码安装正确，一般20分钟后，可以查看网站分析数据。
```

可我们的VuePress项目中生成的html文件都是由Vue编译出来的，实际源代码中都是Markdown文档和js文件，所以我们无法按照百度统计平台中的方法去安装代码。

## 安装代码

具体只需要处理2个文件，分别是`.vuepress/config.js`和`.vuepress/enhanceApp.js`（如果不存在就自己创建）。

### 编辑config.js

```js
module.exports = {
  /// ...其他配置项
  head: [
    /// ...其他head项
    // 百度统计代码
    [
      "script",
      {},
      `var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?1eb7f71a234c2320xxxxxxxxxxxxxxxx";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();`,
    ],
  ],
  /// ...其他配置项
};
```

### 编辑enhanceApp.js

主要是用来让统计代码可以捕捉到Vue的路由变化。

```js
export default ({ router }) => {
  // 路由切换事件处理
  router.beforeEach((to, from, next) => {
    //触发百度的pv统计
    if (typeof _hmt != "undefined") {
      if (to.path) {
        _hmt.push(["_trackPageview", to.fullPath]);
      }
    }
    next();
  });
};
```

## 安装检查

完成上面操作后，将项目重新编辑打包并发布到服务器上，试着浏览网站，打开`F12`，在`Network`中查看有没有`hm.js`，如果有，就说明统计代码安装成功了，按照百度统计的说法，多等些时候就能看到统计结果了。