VuePress 添加百度统计代码

获取百度统计代码

• 百度统计官网
• 登陆 - 点击 “获取代码”

添加到vuepress中

1. 编辑 @/docs/.vuepress/config.js 对应的 head 部分信息

   module.exports = {
   title: 'XXXX',
   description: 'XXXX',
   base: '/',
   head: [
      ['link', { rel: 'icon', href: '/me.ico' }],
      // 添加百度统计代码
      ['script', {},
      `
      var _hmt = _hmt || [];
      (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?XXXXXXXXXXX";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
      })();
       `
      ]
   ],
   ...
   }
   

2. 因为是单页面应用，所以需要强制将页面的跳转等信息发送给百度统计。所以建立 @/docs/.vuepress/enhanceApp.js 添加以下内容

   export default ({ router }) => {
      /**
       * 路由切换事件处理
       */
      router.beforeEach((to, from, next) => {
          // console.log("切换路由", to.fullPath, from.fullPath);
   
          //触发百度的pv统计
          if (typeof _hmt != "undefined") {
              if (to.path) {
                  _hmt.push(["_trackPageview", to.fullPath]);
                  console.log("上报百度统计", to.fullPath);
              }
          }
   
          // continue
          next();
      });
   };
   

---

转载注明出处：www.meidanlong.com 😃