今天有個(gè)同事問我怎么在用nuxt開發(fā)的項(xiàng)目中加入百度統(tǒng)計(jì)的代碼，想起自己之前搞這個(gè)的時(shí)候也是花了點(diǎn)時(shí)間去處理的，整體來說不復(fù)雜，但是找不到設(shè)置的地方就很麻煩。
那么這里簡單來講一下這整個(gè)流程
1. 獲取百度的統(tǒng)計(jì)代碼
百度統(tǒng)計(jì)的原理就是在你當(dāng)前的頁面中注入一段js來監(jiān)聽你頁面的點(diǎn)擊以及跳轉(zhuǎn)情況，所以一開始的一步就是要申請(qǐng)網(wǎng)站對(duì)應(yīng)的統(tǒng)計(jì)代碼。
在此之前的申請(qǐng)賬號(hào)啥的就默認(rèn)跳過了，登錄了百度統(tǒng)計(jì)的控制中心后，點(diǎn)擊頂部欄的“管理”，進(jìn)入管理頁后可以看到新增網(wǎng)站，點(diǎn)擊新增，填入必要的信息后創(chuàng)建成功
之后我們就可以在跳轉(zhuǎn)的頁面內(nèi)看到一段統(tǒng)計(jì)代碼，其中的重點(diǎn)是紅框里面的內(nèi)容，因?yàn)橐话?html文件的話隨便在<head>塞進(jìn)去就ok
2.在nuxt項(xiàng)目中加入統(tǒng)計(jì)代碼
2.1 nuxt是什么？
沒有使用過nuxt的同學(xué)可能會(huì)有這樣的疑問，簡單來講就是vue的服務(wù)端渲染框架，具體的特性啥的這里就不展開講了，其總的目的就是使用服務(wù)端渲染生成可供爬蟲抓取的html文件，以此達(dá)到搜索引擎優(yōu)化。
2.2 如何加入統(tǒng)計(jì)代碼
nuxt框架是一個(gè)比較有意思的框架，其內(nèi)部沒有index.html這個(gè)入口文件，項(xiàng)目的初始化以及非npm依賴都只能在nuxt.config.js內(nèi)進(jìn)行，所以當(dāng)一開始說要加這個(gè)文件時(shí)候我也是有點(diǎn)摸不著頭腦的，主要思路也是在nuxt.config.js中找到對(duì)應(yīng)的地方。
我先是找到了nuxt中head的配置，但是看了一眼都是關(guān)于meta的配置的，好像跟我的目標(biāo)有點(diǎn)差距，然后在文檔里面發(fā)現(xiàn)了vue-meta配置文檔。在vue-meta文檔中翻了一下，終于找到了有關(guān)script的描述。
既然找到了文檔，那么問題就變得很簡單了，在nuxt.config.js中加入對(duì)應(yīng)的代碼段就ok了，加入之后如下圖。
3. 如何檢測是否添加成功
3.1 在網(wǎng)頁中審查源代碼
我們的目標(biāo)就是讓百度統(tǒng)計(jì)的代碼出現(xiàn)在服務(wù)端渲染后的網(wǎng)頁文檔中（這個(gè)是為了保證在網(wǎng)頁初始化前完成代碼的注入），所以最直接的一個(gè)辦法就是審查網(wǎng)頁源代碼，在網(wǎng)頁中右鍵->審查源代碼，然后在頭部看看有沒有對(duì)應(yīng)的代碼即可，有的話就是添加成功了。
沒有的話，那應(yīng)該是沒有按照步驟操作，否則理論上不會(huì)出毛病。
3.2 在百度統(tǒng)計(jì)管理處進(jìn)行代碼檢測
最后需要在百度統(tǒng)計(jì)“管理”那里進(jìn)行一次代碼檢測，檢測通過之后即為完成添加。
4. 非nuxt項(xiàng)目怎么辦？
有些同學(xué)可能也會(huì)遇到說用的不是nuxt開發(fā)，那應(yīng)該怎么添加呢？這里就簡單地說一下
1. 傳統(tǒng)的多頁面應(yīng)用
如果還是每個(gè)頁面都是一個(gè)html文件的話，老老實(shí)實(shí)在每個(gè)頁面的head處插入對(duì)應(yīng)的script片段
2. 單頁面（SPA）應(yīng)用
在index.html處插入對(duì)應(yīng)的script片段
最終驗(yàn)證的都是在審查源代碼中看到即可。
結(jié)語
nuxt是個(gè)很好用的框架，而且在不斷地改進(jìn)，有興趣的小伙伴可以多嘗試一下，了解下服務(wù)端渲染的一些概念也是挺有意思的。
