89 lines
2.7 KiB
Markdown
89 lines
2.7 KiB
Markdown
# 在VuePress项目中添加百度统计代码
|
||
|
||
## 背景
|
||
|
||
VuePress是Vue驱动的静态网站生成器，如果想知道VuePress生成的网站每天的访问情况而又不想为它开发后台，最好就是引用外部统计脚本，本文选择百度统计平台。
|
||
|
||
## 获取统计代码
|
||
|
||
百度统计平台地址： <https://tongji.baidu.com>
|
||
|
||
登录后先创建站点，然后就可以获取统计代码，得到的统计代码示例：
|
||
|
||
```html
|
||
<script>
|
||
var _hmt = _hmt || [];
|
||
(function() {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?1eb7f71a234c2320xxxxxxxxxxxxxxxx";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();
|
||
</script>
|
||
```
|
||
|
||
同时，在百度统计的代码获取页中还有一段说明，原文如下：
|
||
|
||
```text
|
||
代码安装说明
|
||
|
||
1. 请将代码添加到网站全部页面的</head>标签前。
|
||
2. 建议在header.htm类似的页头模板页面中安装，以达到一处安装，全站皆有的效果。
|
||
3. 如需在JS文件中调用统计分析代码，请直接去掉以下代码首尾的，<script type="text/javascript">与</script>后，放入JS文件中即可。
|
||
|
||
如果代码安装正确，一般20分钟后，可以查看网站分析数据。
|
||
```
|
||
|
||
可我们的VuePress项目中生成的html文件都是由Vue编译出来的，实际源代码中都是Markdown文档和js文件，所以我们无法按照百度统计平台中的方法去安装代码。
|
||
|
||
## 安装代码
|
||
|
||
具体只需要处理2个文件，分别是`.vuepress/config.js`和`.vuepress/enhanceApp.js`（如果不存在就自己创建）。
|
||
|
||
### 编辑config.js
|
||
|
||
```js
|
||
module.exports = {
|
||
/// ...其他配置项
|
||
head: [
|
||
/// ...其他head项
|
||
// 百度统计代码
|
||
[
|
||
"script",
|
||
{},
|
||
`var _hmt = _hmt || [];
|
||
(function() {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?1eb7f71a234c2320xxxxxxxxxxxxxxxx";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();`,
|
||
],
|
||
],
|
||
/// ...其他配置项
|
||
};
|
||
```
|
||
|
||
### 编辑enhanceApp.js
|
||
|
||
主要是用来让统计代码可以捕捉到Vue的路由变化。
|
||
|
||
```js
|
||
export default ({ router }) => {
|
||
// 路由切换事件处理
|
||
router.beforeEach((to, from, next) => {
|
||
//触发百度的pv统计
|
||
if (typeof _hmt != "undefined") {
|
||
if (to.path) {
|
||
_hmt.push(["_trackPageview", to.fullPath]);
|
||
}
|
||
}
|
||
next();
|
||
});
|
||
};
|
||
```
|
||
|
||
## 安装检查
|
||
|
||
完成上面操作后，将项目重新编辑打包并发布到服务器上，试着浏览网站，打开`F12`，在`Network`中查看有没有`hm.js`，如果有，就说明统计代码安装成功了，按照百度统计的说法，多等些时候就能看到统计结果了。
|