【Vue】16.vue项目里引入百度统计

参考官网：百度统计开放平台 百度统计

最近往项目里面引入百度统计，也是在网上查了各种资料，把百度统计的官网api又好好的看了一下，顺着文档的步骤，一步一步走下来，其实还蛮简单的，首先先在百度统计注册一个账号，在管理页面填写好自己要监控的网站域名，网站的首页，填写完成以后，会自动生成一段代码，如下图所示，我这里已经填写过了，点击获取代码，就可以取到百度自动生成的代码。

但是在vue单页面开发中接入百度统计代码时，不能把这一段代码按照官网说的放到index.html的head标签里，因为vue是单页面路由切换的，这样的话就只能统计到一次，其他页面的切换就会统计不到，所以就把这一段代码加到入口文件main.js里面，把_hmt变量挂载到window下，这样_hmt就成了全局变量，就可以在任何地方访问了，要不然就会报_hmt变量找不到的错。

1.在main.js下百度统计代码添加

// eslint-disable-next-line
const _hmt = _hmt || [];
// eslint-disable-next-line
window._hmt = _hmt; // 必须把_hmt挂载到window下，否则找不到
(function () {
  const hm = document.createElement('script');
  hm.src = 'https://hm.baidu.com/hm.js?6f2212ee8e3fd2f83702bd023606f48e';
  const s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(hm, s);
}());

这里要注意一下，如果安装的有ESLint代码校验的话，_hmt变量上面要加 // eslint-disable-next-line 让ESLint不检测这一行代码，因为现在的变量命名是不建议有_的，所以ESLint认为是不符合语法的，就一直报错，因为这个变量是百度的，里面的api都是通过这个变量调用的，我们不能更改，所以只能不让ESLint校验这个变量。

2.创建vueRouter后，调用beforeEach方法，每个路由跳转时都将其跳转的路由推给百度

router.beforeEach((to, from, next) => {
  // eslint-disable-next-line
  if (_hmt) {
    if (to.path) {
      // eslint-disable-next-line
      _hmt.push(['_trackPageview', to.fullPath]);
    }
  }
  next();
});

这里因为我的路由mode是history，所以 _hmt.push(['_trackPageview', to.fullPath])，但是如果是hash的话，后面的路径要修改一下，改成

_hmt.push(['_trackPageview', '/#' + to.fullPath]);

这是监控页面的pv统计，如果想监控哪一个按钮点击的次数，就可以直接在按钮事件下调用百度api的事件方法，比如我的这个复制小程序昵称的方法，就可以统计到这个按钮点击的次数，也就是小程序昵称被复制的次数

      copyToBoard() {
        // eslint-disable-next-line
        _hmt.push(['_trackEvent', 'copy', 'copy', '复制小程序昵称', 10]);
        this.$copyText(this.message).then((e) => {
          console.log(this.message);
          console.log(e);
          this.$createToast({
            txt: '小程序昵称已复制',
            type: 'txt',
            time: 3000,
          }).show();
        }, (e) => {
          console.log(e);
        });
      },

运行代码大概20分钟以后，如果有人访问网站的话，百度统计里面就能看到统计结果了