M
SAAS权限管理系统| vue、nuxt 添加百度统计
vue、nuxt添加百度统计功能
首页我用的nuxt,优化访问速度和支持seo,其他的一些功能页面用的vue
1 先到百度统计网站注册登录,添加好域名后,获取到统计代码,如下图
2 vue项目添加百度统计
index.html 添加代码
<script>
var _hmt = _hmt || [];
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?****************";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
完整如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script>
var _hmt = _hmt || [];
</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?****************";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
加入路由跳转监听代码:
router.beforeEach((to, from, next) => {
if (to.path) {
if (window._hmt) {
window._hmt.push(['_trackPageview', to.fullPath])
}
}
next()
})
3 nuxt添加百度统计
在 /plugins/文件夹内添加 baidu.js文件
/*
** 只在生产模式的客户端中使用
*/
if (process.client && process.env.NODE_ENV === 'production') {
/*
** baidu 统计分析脚本
*/
var _hmt = _hmt || [];
(function () {
var hm = document.createElement('script')
hm.src = 'https://hm.baidu.com/hm.js?*****************'
hm.id = 'baidu_tj'
var s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(hm, s)
})()
}
export default ({ app: { router }, store }) => {
/*
** 每次路由变更时进行pv统计
*/
if (process.client && process.env.NODE_ENV === 'production') {
router.afterEach((to, from) => {
var _hmt = _hmt || [];
(function () {
document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove()
var hm = document.createElement('script')
hm.src = 'https://hm.baidu.com/hm.js?*****************'
hm.id = 'baidu_tj'
var s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(hm, s)
})()
})
}
}
在/nuxt.config.js文件中添加链接
plugins: [
{ src: '@/plugins/baidu.js', ssr: false }
],
分别打包进行部署
4 验证
我首页使用nuxt,相关代码都打包到js文件里去了,所以百度统计的代码检查一直过不去,但是功能的确已经生效了
5 其他
var _hmt = _hmt || []
说明文章: https://blog.csdn.net/u012982629/article/details/80463583