百度统计可以说是市面上最为常见，也是少数免费的统计网站之一。那么关于统计我们要如何使用呢？

使用百度统计可以帮助我们可以更好的了解自己网站的浏览情况及根据网站浏览情况来调整网站定位及内容的更新。

因此一个网站的统计数据，其实对于网站管理员来说时极为重要的。因此对于网站的优化，统计数据的接入是一个刚需也是一个极为重要的辅助。

本篇文章就来介绍前端开发中，在nuxt4中开发者如何安装百度统计实现对网站统计。

一、获取百度统计代码

    1.1、在百度统计网站后台获取统计代码

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?每个网站这里值不一样";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

二、在nuxt4中安装百度统计代码

    2.1、在app/plugins中创建

// plugins/baidu-analytics.client.js
export default defineNuxtPlugin((nuxtApp) => {
  // 百度统计代码
  const baiduScript = document.createElement('script')
  baiduScript.innerHTML = `
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?百度统计网站生成的id";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
  `
  document.head.appendChild(baiduScript)
  // 页面路由变化时推送统计
  nuxtApp.$router.afterEach((to, from) => {
    if (typeof _hmt !== 'undefined') {
      _hmt.push(['_trackPageview', to.fullPath])
    }
  })
})

    2.2、在nuxt.config.ts配置

export default defineNuxtConfig({
	plugins: [
	    '~/plugins/baidu-analytics.client.js'
	]
})

按照以上流程即可完成，百度统计代码的安装。