vue项目添加百度统计

第一步：准备工作

1.使用百度账号登录百度统计平台(没有百度账号先注册一个)
https://tongji.baidu.com/web/welcome/login

2.登录后进入管理 >账户管理 > 网站列表 > 新增网站

3.录入网站信息后保存

4.代码管理 > 代码获取 > 复制代码

5.在代码管理 > 单页应用设置 > 启用 > 保存，启用单页应用数据统计模式

第二步：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 || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx";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

第三步：代码安装检查

回到百度统计平台 > 管理 > 代码管理 > 代码安装检查 > 开始检查，检查结果显示“代码安装正确”表示成功了

第四步：查看统计

1.先在浏览器输入域名访问自己的网站逛个几分钟，然后回到百度统计平台 > 基础报告 > 网站概况，就能看到一些统计数据了

2.进入流量分析 > 实时访客还能看到一些细节数据