在Vue项目中添加百度统计功能

诺多 • 2022年3月2日 01:33 • 编程

最近接到一个需求，需要统计公司官网的日常访客情况，以供运营人员进行分析。正好博主自己的博客也做过类似的事情，不过公司官网是Vue开发的，不是静态网站。在跟前端开发简单了解Vue的相关技术后，也完美解决了。

前提准备

在开始之前，需要先到百度统计官网（https://tongji.baidu.com/）注册一个账号，并且在账号管理中新增一个站点：

点击新增站点,按照实际情况填写即可：

新增完成后，点击获取代码，获取到百度统计的js代码，后续会用到

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

注意：代码中的xxxxxxxxxxxxxxxx每个站点都不同，请从百度统计后台复制。

项目配置

打开项目的index文件，如index.html、index.template.ejs等，读者根据自己的项目来

在head标签中添加以下代码

<script>        var _hmt = _hmt || [];</script>

然后在body标签的最后添加以下代码

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