Vuepress网站添加百度统计

由于想获取网站每日的访问数据，但又不想为此而写一个后端（这个网站是一个基于vuepress搭建的纯静态网站），所以打算使用第三方网站流量监控工具。

常见的有Google Analytics、百度统计、腾讯统计和CNZZ等，vuepress官方提供了Google Analytics插件 (opens new window)，但担心访问不稳定，这里就直接选择百度统计。

获取百度统计代码

注册或直接登录百度统计 (opens new window)网站，新增你的网站。

添加完后，点击获取代码获取代码如下

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

我们复制script标签中的内容（注意每个人的都不一样）

编辑vuepress配置

编辑文件.vuepress/config.js，加入后内容如下

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

网站重新打包部署一下即可。

获取统计报告

回到百度统计网站，刷新首页代码状态，隔段时间后便可看到网站的流量统计报告。