vitepress添加百度统计代码 ​

发布时间：2025年12月30日 19:49

vitepress是一个单页应用 ​

vitepress框架在加载的时候感觉还是挺快的，重要是点击链接感觉很快，刚开始我还没发现，后来经过我的研究才发现。

原理应该就是初次快速加载当前页面，然后后台把整个网站数据全部缓存下来，点击站内链接直接使用缓存加载，然后更新路径，更新内容。

这样的话有好处也有坏处，好处加载快，坏处，我的统计代码只加载一次，后续使用缓存，没有发起新的页面请求，统计代码就会没有运行的机会。因为统计代码就是在页面加载时执行一次而已。

解决办法 ​

vitepress内部有自己的路由，我们监听这个路由，这个路由更新的时候，再次调用统计代码运行就好了。

代码分享如下，后续有需求可再次查看。

添加统计代码 ​

在config.js文件添加统计代码

位置在head配置内部，示例:

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

这里注意原来的百度统计代码，普通变量要注册成window变量，不然后续无法再次调用。

监听路由变化 ​

在主题下的index.js中添加监听，要在导出默认主题之前添加。

DefaultTheme.enhanceApp = ({ app, router, siteData }) => {
    router.onBeforeRouteChange = (to) => {
        if (typeof _hmt !== 'undefined') {
            _hmt.push(['_trackPageview', to]);
        }
    };
};

批注 ​

2025年12月31日 21:26

刚才在搜索统计代码相关的时候，看到一位年长者说，网站安装统计代码根本没必要，如果用服务器，服务器后台可以看的清清楚楚，如果用CDN，CDN后台清清楚楚。而且统计代码需要跑别人的网站数据，如果出了问题，自己的网站也会受影响，比如挂马，网络问题等。

起初我不在意，仔细一想，有道理。然后赶紧打开我的边缘加速打开统计功能一看，果然，位置，域名，浏览器，时间，来源，各种信息，显示的清清楚楚，还可以各种条件筛选，我为什么还安装统计代码啊，这个看的那么清楚！！