M SAAS权限管理系统| vue、nuxt 添加百度统计
2020-11-18 06:41:08 91 庶卒 SAAS权限管理系统 版本: 1 引用率 13.65%
# 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%