nuxt项目 添加百度统计问题

最近对公司的移动端项目进行重构，踩了不少坑，今天抽点时间来整理下。因为要考虑到seo，所以采用nuxt来重构。

nuxt是什么呢?

简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）。 目的是为了解决单页面应用的 SEO 的问题，好让搜索引擎抓取页面相关内容，提高排名。废话少说，直奔主题。接下来我要讲的是如何添加百度统计。

添加百度统计

1. utils目录下添加BaiDuCount.js

utils/BaiDuCount.js

export const baiduCountMobileArr=[
    {
        city: 'bj',
        code: 'f06c3970bab960cc752c12a5f'
    },
    {
        city: 'gz',
        code: '42b96aec52d108750e41695'
    },
    {
        city: 'sh',
        code: '42b96aec52d108750e4c99c695'
    },
    
];

2. plugins目录下加baidu.js

plugins/baidu.js

import {baiduCountMobileArr} from '~/utils/BaiDuCount.js'
export default ({app: {router}, store}) => {
    /* 每次路由变更时进行pv统计 */
    router.afterEach( ( to, from, next ) => {
        //加上try 不然会报错
        try {
            let city = to.params.city;
            if (city == '') {
            } else {
                baiduCountMobileArr.forEach((value, index) => {
                    if (value.city == city) {
                        baiduCountCode(value.code);
                    }
                })
            }
            /*平台主域名统计*/
            baiduCountAllCode(baiduCountMobileArr[0].code);
        } catch (e) {

        }
    } );
}
function baiduCountAllCode(code){
    var _hmt = _hmt || [];
    (function() {
        //会叠加 需要 每次执行前，先移除上次插入的代码
        document.getElementById('g_baidu') && document.getElementById('g_baidu').remove();
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?"+code;
        hm.id = "g_baidu"
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
}
function baiduCountCode(code){
    var _hmt = _hmt || [];
    (function() {
        //会叠加 需要 每次执行前，先移除上次插入的代码
        document.getElementById('w_baidu') && document.getElementById('w_baidu').remove();
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?"+code;
        hm.id = "w_baidu"
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
}

3. nuxt.config.js配置

module.expors = {
  plugins = [
     {src: '~plugins/baidu.js'},
  ]
}

 结束。