阳光沙滩
让学习编程变得简单
Nuxt.js集成百度统计
发表于 2020-03-07    阅读次数 227

Nuxt.js集成百度统计

百度统计给我们的是一段js代码,也就是javascript代码,其他第三方的统计也是差不多的。

怎么样集成到Nuxt.js项目里呢?

  1. 在plugin里新建一个BaiduHm.js

添加以下代码:

export default ({app: {router}, store}) => {
  /* 当路由改变的时候,推送一次 */
  router.afterEach((to, from) => {
    try {
      window._hmt = window._hmt || [];
      window._hmt.push(['_trackPageview', to.fullPath])
    } catch (e) {
    }
  })
}
  1. 在nuxt.config.js里添加脚本
script: [
   ...
      {
        src: 'https://hm.baidu.com/hm.js?xxx'
      },
   ...
    ],
    __dangerouslyDisableSanitizers: ['script']

xxx替换成你自己的即可

  1. 引入plugin
  plugins: [
  ...
    {
      src: '~/plugins/baiduHm.js', /*百度统计*/
    }
...
  ],
  1. 部署然后查看结果

部署教程请看这里吧

使用docker部署Nuxt.js项目,实现服务端渲染

检查代码,登录百度统计后台,进去-->管理

图片描述

检查一下安装代码,然后查看结果,如上图则安装成功。一会就可以统计到浏览数据了。