# vue、nuxt添加百度统计功能73.03%      

首页我用的nuxt，优化访问速度和支持seo，其他的一些功能页面用的vue

## 1 先到百度统计网站注册登录，添加好域名后，获取到统计代码，如下图

![image.png](/ncimg/M00/00/03/rBIgzV-1EmWAXlTqAADve40oPjI340.png)68.42%      

## 2 vue项目添加百度统计

index.html 添加代码
```html
    
```

```html
    
```

完整如下
```html


  
    
    
    
  
  
    

    
    
  


```
加入路由跳转监听代码：
```js
router.beforeEach((to, from, next) => {
  if (to.path) {
    if (window._hmt) {
      window._hmt.push(['_trackPageview', to.fullPath])
    }
  }
  next()
})
```

## 3 nuxt添加百度统计63.25%      

在 /plugins/文件夹内添加 baidu.js文件
```js
/*
** 只在生产模式的客户端中使用
*/
if (process.client && process.env.NODE_ENV === 'production') {
  /*
  ** baidu 统计分析脚本
  */
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement('script')
    hm.src = 'https://hm.baidu.com/hm.js?*****************'
    hm.id = 'baidu_tj'
    var s = document.getElementsByTagName('script')[0]
    s.parentNode.insertBefore(hm, s)
  })()
}

export default ({ app: { router }, store }) => {
  /*
  ** 每次路由变更时进行pv统计
  */
  if (process.client && process.env.NODE_ENV === 'production') {
    router.afterEach((to, from) => {
      var _hmt = _hmt || [];
      (function () {
        document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove()
        var hm = document.createElement('script')
        hm.src = 'https://hm.baidu.com/hm.js?*****************'
        hm.id = 'baidu_tj'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(hm, s)
      })()
    })
  }
}

```

在/nuxt.config.js文件中添加链接
```
  plugins: [
    { src: '@/plugins/baidu.js', ssr: false }
  ],
```

分别打包进行部署

## 4 验证

我首页使用nuxt，相关代码都打包到js文件里去了，所以百度统计的代码检查一直过不去，但是功能的确已经生效了

![image.png](/ncimg/M00/00/03/rBIgzV-1FgyADplXAAE2zL0ogaQ245.png)77.90%      


![image.png](/ncimg/M00/00/03/rBIgzV-1FlCAcecaAACqHTt431Y445.png)70.30%