https://blog.csdn.net/lihefei_coder/article/details/115516096
https://www.jianshu.com/p/cf54bd78b7e5
https://www.bigtspace.com/7236.html
第一步：准备工作
1.使用百度账号登录百度统计平台(没有百度账号先注册一个)
https://tongji.baidu.com/web/welcome/login
image.png
2.登录后进入管理 >账户管理 > 网站列表 > 新增网站
image.png
3.录入网站信息后保存
image.png
4.代码管理 > 代码获取 > 复制代码
image.png
5.在代码管理 > 单页应用设置 > 启用 > 保存，启用单页应用数据统计模式
image.png
第二步：vue项目配置
1.打开public/index.html，把复制的代码粘贴到</body>前面，然后包裹一层环境判断代码，再在</head>前面加上一段script代码，同时也包裹一层环境判断代码
注：环境判断代码的作用是开发环境不注入统计代码，打包线上环境时才注入统计代码，如果想在开发环境测试统计可以先不加环境判断代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<% if (process.env.NODE_ENV === 'production' ) { %>
<script>
var _hmt = _hmt || [];
</script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<% if (process.env.NODE_ENV === 'production' ) { %>
<script>
var _hmt = _hmt || [];
// window._hmt = _hmt; // 修改为window 全局变量
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx";//此处请替换你的站点id
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<% } %>
</body>
</html>
如果在百度管理平台没有启用单页面模式，需要配置路由切换时手动埋点，埋点方式如下：
打开路由文件router/index.js，在路由守卫beforeEach中设置如下代码
router.beforeEach(async (to, from, next) => {
if (to.path) {
if (window._hmt) {
window._hmt.push(['_trackPageview', '/#' + to.fullPath]);
}
}
next();
});
2.代码添加完成后执行打包，并部署到服务器上
npm run build
打包发布一下，然后就可以看到每一个路由跳转都可以统计到了！
image.png
1
第三步：代码安装检查
回到百度统计平台 > 管理 > 代码管理 > 代码安装检查 > 开始检查，检查结果显示“代码安装正确”表示成功了
image.png
第四步：查看统计
1.先在浏览器输入域名访问自己的网站逛个几分钟，然后回到百度统计平台 > 基础报告 > 网站概况，就能看到一些统计数据了
image.png
2.进入流量分析 > 实时访客还能看到一些细节数据
image.png
百度统计的代码一直显示未生效
image.png
但是在其他网页中直接输入，就提示安装成功
image.png
这个估计是百度统计的小bug，过个两个小时再来检测，就变成已生效了。
网友评论