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

背景

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

获取统计代码

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

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

<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>

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

代码安装说明

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

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的路由变化。

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，如果有，就说明统计代码安装成功了，按照百度统计的说法，多等些时候就能看到统计结果了。

2.7 KiB Raw Blame History Unescape Escape