nuxt开发中遇到的问题-添加百度统计

        今天在开发基于nuxt的ssr项目时遇到在代码中加入百度统计的需求，经过使用“面向百度编程”技能之后，得到了解决方法。下面就来总结一下在vue项目中怎么加入百度统计的代码。怎样在百度统计的控制中心获取统计的链接此处略过。

1.普通vue spa项目加入百度统计

1）在index.html中的head中新建script标签，里面内容为：

var _hmt = _hmt || [];

(function() {

    var hm= document.createElement("script");

    hm.src= "https://hm.baidu.com/hm.js?b9******************************";

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

    s.parentNode.insertBefore(hm, s);

})(); 

2) 在路由守卫中加入以下内容

router.beforeEach((to, from, next) => {

    *****

    if (to.path && window._hmt) {

        window._hmt.push(['_trackPageview', '/#' + to.fullPath])

    }

    *****

}

结束。

2.nuxt项目中加入百度统计

        nuxt框架内部没有index.html入口文件，所以项目的初始化以及非npm依赖都配置在nuxt.config.js里面，加百度统计也不例外。

        官方相关文档链接：nuxt-head、vue-meta配置

       nuxt.config.js中相关代码如下：

module.exports = {

    head: {

        titleTemplate： ****，

        meta: [],

        script: [

            { src: 'https://hm.baidu.com/hm.js?b9 ****************************** ' }

        ]

    }

}

结束。

3.验证

重启服务，在浏览器中右键查看网页源代码或者ctrl+U,查看head标签中是否有百度统计的script即可。

本文结束。