Vue项目引入百度统计的正确操作步骤,亲测有效!

1、平台获取统计代码

2、在head和body中分别添加以下代码
head:

javascript 复制代码
  <script>
    var _hmt = _hmt || [];
  </script>

body:

javascript 复制代码
  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?476f388f2f9379b40dd120383cf08647";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>

3、在main.js中添加以下代码

javascript 复制代码
// 加入百度统计
router.beforeEach((to, from, next) => {
  if (to.path) {
    if (window._hmt) {
      window._hmt.push(['_trackPageview', '/#' + to.fullPath])
    }
  }
  next()
})

重新build构建部署到服务器上并重启nginx即可,回到百度统计页面代码安装成功!

相关推荐
前端那点事6 小时前
Vue3 script setup 语法糖最全教程!零基础吃透+项目落地+面试满分
前端·vue.js
ConardLi6 小时前
Harness 实践:让 Agent 全自动制作知识讲解视频
前端·人工智能·后端
费曼学习法6 小时前
React Hooks 源码级揭秘:为什么必须按顺序调用?
javascript·react.js
努力干饭中6 小时前
Vibe Coding 第二弹:做一个 Canvas K线图
前端·canvas·vibecoding
卷帘依旧6 小时前
Vue 响应式原理:Object.defineProperty vs Proxy 深度对比
前端·vue.js
yqcoder6 小时前
原生 AJAX 揭秘:如何使用 XHR 发起请求
前端·ajax·okhttp
ZC跨境爬虫6 小时前
跟着 MDN 学 HTML day_34:(深入XML 中的 CDATASection 接口)
xml·前端·html·html5·媒体
之歆6 小时前
DAY_20JavaScript 条件语句与循环结构深度学习(二)
前端·javascript
山北雨夜漫步6 小时前
LangGraph
java·前端·算法
漓漾li6 小时前
每日面试题-前端
前端·react.js·面试