nuxt项目 添加百度统计问题

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

nuxt是什么呢?

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

添加百度统计

1. utils目录下添加BaiDuCount.js

utils/BaiDuCount.js

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

];

2. plugins目录下加baidu.js

plugins/baidu.js

[code]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配置

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

 结束。

• 点赞
• 收藏
• 分享
• 文章举报