今天有个同事问我怎么在用nuxt开发的项目中加入百度统计的代码，想起自己之前搞这个的时候也是花了点时间去处理的，整体来说不复杂，但是找不到设置的地方就很麻烦。
那么这里简单来讲一下这整个流程
1. 获取百度的统计代码
百度统计的原理就是在你当前的页面中注入一段js来监听你页面的点击以及跳转情况，所以一开始的一步就是要申请网站对应的统计代码。
在此之前的申请账号啥的就默认跳过了，登录了百度统计的控制中心后，点击顶部栏的“管理”，进入管理页后可以看到新增网站，点击新增，填入必要的信息后创建成功
新增网站
之后我们就可以在跳转的页面内看到一段统计代码，其中的重点是红框里面的内容，因为一般.html文件的话随便在<head>塞进去就ok
统计代码
2.在nuxt项目中加入统计代码
2.1 nuxt是什么？
没有使用过nuxt的同学可能会有这样的疑问，简单来讲就是vue的服务端渲染框架，具体的特性啥的这里就不展开讲了，其总的目的就是使用服务端渲染生成可供爬虫抓取的html文件，以此达到搜索引擎优化。
2.2 如何加入统计代码
nuxt框架是一个比较有意思的框架，其内部没有index.html这个入口文件，项目的初始化以及非npm依赖都只能在nuxt.config.js内进行，所以当一开始说要加这个文件时候我也是有点摸不着头脑的，主要思路也是在nuxt.config.js中找到对应的地方。
我先是找到了nuxt中head的配置，但是看了一眼都是关于meta的配置的，好像跟我的目标有点差距，然后在文档里面发现了vue-meta配置文档。在vue-meta文档中翻了一下，终于找到了有关script的描述。
既然找到了文档，那么问题就变得很简单了，在nuxt.config.js中加入对应的代码段就ok了，加入之后如下图。
对应的代码片段
3. 如何检测是否添加成功
3.1 在网页中审查源代码
我们的目标就是让百度统计的代码出现在服务端渲染后的网页文档中（这个是为了保证在网页初始化前完成代码的注入），所以最直接的一个办法就是审查网页源代码，在网页中右键->审查源代码，然后在头部看看有没有对应的代码即可，有的话就是添加成功了。
没有的话，那应该是没有按照步骤操作，否则理论上不会出毛病。
审查源代码
3.2 在百度统计管理处进行代码检测
最后需要在百度统计“管理”那里进行一次代码检测，检测通过之后即为完成添加。
检测代码
4. 非nuxt项目怎么办？
有些同学可能也会遇到说用的不是nuxt开发，那应该怎么添加呢？这里就简单地说一下
1. 传统的多页面应用
如果还是每个页面都是一个html文件的话，老老实实在每个页面的head处插入对应的script片段
2. 单页面（SPA）应用
在index.html处插入对应的script片段
最终验证的都是在审查源代码中看到即可。
结语
nuxt是个很好用的框架，而且在不断地改进，有兴趣的小伙伴可以多尝试一下，了解下服务端渲染的一些概念也是挺有意思的。
网友评论