Vue项目中加入百度统计

原本我用的是CNZZ插件来做访客统计的功能，但是现在不免费了，一年最低要近1000块大洋才能使用，我只能呵呵。

主要是网站没人气嘛没必要花这笔钱，而且还穷。

那就这样吧，再用下下去，就不划算了！！！

于是在百度搜罗资料，寻求一个Vue项目能做访客统计的插件。

最终选中了百度统计这款插件，话不多说，用起来先！

1.申请百度统计的账号（已有账号请跳过此步。）

官方地址：https://tongji.baidu.com/sc-web/

2.新建网站，获取代码

需要填写项：网站域名、网站首页、网站首页、行业类别
其中“网站域名“和”网站首页”是必填，因为直接关系到统计的对象

填写好之后，如果后续要调整是可以编辑的；

这里我发现，配置好之后总是会直接进入统计页面，后续难找到这个页面，于是我自己做了一个记录：这是我的后台，你的自己记录，嘿嘿。

创建好之后，点击“获取代码”，然后“复制代码”，这个代码就是我们需要用到网站配置中去的。

3.在Vue项目中引入统计的代码，实现统计功能

Vue的项目不同于其它直观的Web项目，如果直接在script脚本中引入，无法生效；

1）在App.vue页面created中放入统计代码（这里放你自己的代码，我呈现的是我的）

1
2
3
4
5
6
7
8
9

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

2）在main.js中添加以下内容

router.beforeEach((to, from, next) => {
  //添加页面访问记录
  if (to.path) {
    if (window._hmt) {
      window._hmt.push(['_trackPageview', '/#' + to.fullPath])
    }
  }
  next()
})

3）完成以上两步后，我们就可以打包网站部署到服务器上去了，接下来就是验证统计功能有没有生效

回到刚才生成统计代码的页面，点击代码检查，或者点击前面的刷新按钮；系统便会检测统计功能是否生效;如果生效“首页代码状态”显示的是“代码安装正确”

注意：生效后大概20分钟才会生成访问分析的报告。