vue添加百度统计

朱雀 2022-05-19 14:05 226阅读 0赞

申请百度统计后，会得到一段JS代码，需要插入到每个网页中去，在Vue.js项目首先想到的可能就是，把统计代码插入到index.html入口文件中，这样就全局插入，每个页面就都有了;这样做就涉及到一个问题，Vue.js项目是单页应用，每次用户浏览网站时，访问内页时页面是不会刷新的，也就意味着不会触发百度统计代码；所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量，却无法统计到内页的访问流量。

**解决方法**

在main.js文件中调用vue-router的afterEach方法,将统计代码加入到这个方法里面，这样每次router发生改变的时候都会执行一下统计代码，这样就达到了目的,代码如下:

`router.afterEach( ( to, from, next ) => {`

` ``setTimeout(()=>{`

`   ``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?xxxx"``;`

`    ``hm.id =``"baidu_tj"`

`    ``var``s = document.getElementsByTagName(``"script"``)[0];`

`    ``s.parentNode.insertBefore(hm, s);`

`   ``})();`

` ``},0);`

`} );`

main.js

import Vue from 'vue'
    import ElementUI from 'element-ui'
    import App from './App.vue'
    import router from './router/router'
    
    import 'element-ui/lib/theme-chalk/index.css'
    /*import '../static/js/bwrdfr.js'　　　　
    import '../static/js/bwrdfr-i.js'　　　　
    import '../static/js/json-mini.js'　*/
    import '../static/UE/ueditor.config.js'　　　　
    import '../static/UE/ueditor.all.min.js'　　　　
    import '../static/UE/lang/zh-cn/zh-cn.js'　　　　
    import '../static/UE/ueditor.parse.min.js'
    /*import "../plugins/ztree/js/jquery.ztree.core.js"
    import "../plugins/ztree/js/jquery.ztree.excheck.js"
    import "../plugins/ztree/js/jquery.ztree.exedit.js"*/
    
    /*import '../static/js/xxs.js'*/
    /*import '../static/js/el.jss'*/
    
    Vue.use(ElementUI)
    
    
    /**
     *  加载插件
     *  @VueRouter：路由
     */
    
    /**
     *  定义常量信息
     *  @DOMAINNAME：客户端地址
     *  @SERVERNAME：服务端地址
     *  @API_SERVER：服务端接口
     */
    
    let DOMAINNAME = ''
    let SERVERNAME = ''
    let API_SERVER = ''
    /**
     *  全局方法
     */
    
    //获取当前页面路由信息
    router.afterEach(function(transition) {
     //console.log(transition)
      setTimeout(()=>{
        var _hmt = _hmt || [];
      (function() {
        //每次执行前，先移除上次插入的代码
        document.getElementById('baiduCount') && document.getElementById('baiduCount').remove();
        var hm = document.createElement("script");
        var host = window.location.hostname;
        if(host.match("mydataaetest")){
            hm.src = "https://hm.baidu.com/hm.js?f708be5720a63c913d0785a43e0d1bcd2";
        }
        else if (host.match("data.bw30.com")) {
          hm.src = "https://hm.baidu.com/hm.js?b7decb63e76312d2abbb69511f020a741";
        }
    
        hm.id = "baiduCount"
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    },0);
    })
    
    /**
     *  创建实例
     */
    new Vue({
     router,
     render: h => h(App)
    }).$mount('#app')

# 自定义plugin #

1.  `var track = {`
2.  `hasTrack: true,`
3.  `hash: 'xxxx'`
4.  `};`
5.   
6.   
7.  `function HTMLWebpackMonitorPlugin(options) {`
8.  `this.options = options;`
9.  `}`
10.  
11. `HTMLWebpackMonitorPlugin.prototype.apply = function(compiler) {`
12. `compiler.plugin('compilation', function(compilation, options) {`
13. `compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {`
14.  
15. `if (track.hasTrack) {`
16. ``var script = ` ``
17. `<script>`
18. `var _hmt = _hmt || [];`
19. `(function() {`
20. `var hm = document.createElement("script");`
21. ``hm.src = "https://hm.baidu.com/hm.js?` + track.hash + `";``
22. `var s = document.getElementsByTagName("script")[0];`
23. `s.parentNode.insertBefore(hm, s);`
24. `})();`
25. `</script>`
26. `` `;``
27. `htmlPluginData.html = htmlPluginData.html.replace('</body>', script + '</body>');`
28. `}`
29.  
30.  
31.  
32. `callback(null, htmlPluginData);`
33. `});`
34. `});`
35. `};`
36.  
37. `module.exports = HTMLWebpackMonitorPlugin;`

# 使用方式 #

var htmlWebpackMonitorPlugin = require('./plugins/html-webpack-monitor-plugin');  
new htmlWebpackMonitorPlugin();

# vue router 添加 #

直接导入到html中是只有一次请求效果，所以需要添加到router切换中  
router.beforeEach((to, from, next) => \{  
    if (to.path) \{  
        if (window.\_hmt) \{  
            window.\_hmt.push(\['\_trackPageview', '/\#' + to.fullPath\]);  
        \}  
    \}  
    next();  
\});  
![SouthEast][]

[SouthEast]: /images/20220519/473422ff39154709908fe07e8413340a.png