最稳妥做法是将百度统计脚本直接插入HTML的<head>中；动态插入会导致首屏PV漏统计、执行延迟、被广告拦截器阻断及\_hmt未定义报错，SPA还需在router.beforeEach中手动推送to.fullPath以确保路由变化被追踪。
直接在 <head> 里插入统计脚本是最稳妥、最通用的做法，适用于所有静态 HTML 或构建产物（如 Vue/React 的 index.html）。
为什么不能只靠 JS 动态 append？
很多教程提到用 document.createElement("script") 在 mounted 或生命周期里动态加载——这会导致首次访问漏统计。百度统计的 _hmt 初始化必须在页面开始渲染时就存在，否则首屏 PV（Page View）不会上报。动态插入脚本有执行延迟，且可能被广告拦截器阻断（尤其在 Safari 或启用严格隐私策略的浏览器中）。
- 首屏加载时，
<head>中的脚本会同步解析并触发初始化 - JS 动态插入属于异步行为，
_hmt.push可能执行时_hmt还未定义，报ReferenceError: _hmt is not defined - 部分 CDN（如百度统计）依赖
document.write或早期 DOM 访问，晚于DOMContentLoaded就失效
百度统计的标准插入位置和写法
登录 百度统计后台，添加站点后复制生成的代码，**粘贴到 index.html 的 <head> 标签内、任意已有 <script> 之前**（顺序不敏感，但建议靠前）：
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?your-tracking-id-here";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
注意：your-tracking-id-here 要替换成你后台看到的真实 ID（32 位十六进制字符串），不能保留字面量；hm.js? 后面不能多空格或换行；整个块不要包裹在 async 或 defer 属性里——它自己已处理异步加载。
立即学习“前端免费学习笔记（深入）”；
Vue 单页应用（SPA）必须补路由追踪
静态插入只管首屏，Vue Router 切换页面不刷新 DOM，所以必须手动推送新路径。别只在组件 mounted 里调用 _hmt.push，那会重复统计（比如嵌套路由、keep-alive 组件反复激活）。
- 统一在
router.beforeEach中处理：确保每次有效导航都触发一次_trackPageview - 路径要传
to.fullPath（含 query 和 hash），不是to.path，否则带参数的页面会被归为同一 PV - 加防护：检查
window._hmt是否存在，避免开发环境报错（如本地没连统计服务）
示例代码（router/index.js）：
router.beforeEach((to, from, next) => {
if (window._hmt && to.fullPath) {
window._hmt.push(['_trackPageview', to.fullPath]);
}
next();
});
验证是否生效的三个关键点
上线后别等后台“实时数据”——先看浏览器能不能发出去请求：
- 打开 DevTools → Network → 切换到 XHR / Img 标签页，刷新页面，搜
hm.gif，应有至少一个请求（含si、u、v等参数） - 检查 Console 是否报
Uncaught ReferenceError: _hmt is not defined——说明脚本没加载或执行失败 - 确认页面没有
<meta name="referrer" content="no-referrer">，这个标签会阻止百度统计携带来源信息，导致部分数据丢失
真正容易被忽略的是：统计代码部署后，百度后台的数据延迟通常为 5–20 分钟，且首次安装需等待约 2 小时才显示“今日活跃”，期间无数据≠没生效。
