VuePress 引入统计代码

MuYan2020-12-14VuePressVueVuePress

config

通过配置文件引入统计代码 官方文档open in new window

百度统计

// config.js
module.exports = {
    head: [
        [
            'script',
            {},
            `
            var _hmt = _hmt || [];
            (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?XXXXXX";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
            })();    
        `
        ]
    ]
}
  • 如需统计访客访问路径,需进行以下操作

提示

因为 vuepress 是基于 vue 开发单页面应用,所以页面切换过程中,不会重新加载页面,这样就不会触发百度统计相关代码(刷新页面 or 重新打开新的访问链接会重新触发相关代码),所以我们需要监听 router ,手动上报 pv 统计

以下配置需将源码本地化open in new window,并修改对应源码

  • 注:每次路由变更都会执行该方法
// enhanceApp.js
import Router from 'vue-router'

const router = new Router({
    mode: 'history'
})

export default ({
    router
}) => {
    router.beforeEach((to, from, next) => {
        // 执行百度的pv统计
        if (typeof _hmt != "undefined" && to.path) {
            // decodeURIComponent 解密 to.fullPath,防止上报的 to.fullPath 路径为浏览器 encodeURIComponent 后的路径
            _hmt.push(["_trackPageview", decodeURIComponent(to.fullPath)]);
        }
        next()
    })
}

百度统计APi文档open in new window

上次更新 2026/6/23 11:49:15
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8
本页目录