众所周知 typescript中无法直接加入js代码
所以需要在plugins下新建一个插件 比如baidu-analytics.client.ts 使用.client.ts后缀直接限制了插件在客户端执行而不在服务端执行
内容如下
// 声明全局类型
declare global {
interface Window {
_hmt?: any[]
}
}
export default defineNuxtPlugin(() => {
// 只在客户端运行
if (import.meta.server) return
// 初始化百度统计对象
window._hmt = window._hmt || []
// 动态加载百度统计脚本
;(function() {
const hm = document.createElement('script')
hm.src = 'https://hm.baidu.com/hm.js?xxxx'//你的代码中的id
hm.async = true
const s = document.getElementsByTagName('script')[0]
if (s && s.parentNode) {
s.parentNode.insertBefore(hm, s)
}
})()
// 等待路由就绪后再监听路由变化
const router = useRouter()
// 监听路由变化,每次路由变更时进行 PV 统计
router.afterEach((to, from) => {
// 确保百度统计脚本已加载
if (typeof window._hmt !== 'undefined' && window._hmt) {
try {
// 告诉百度统计增加一个 PV
// 使用 to.fullPath 包含查询参数和 hash
window._hmt.push(['_trackPageview', to.fullPath])
} catch (e) {
// 静默处理错误,避免影响页面正常功能
console.warn('百度统计跟踪失败:', e)
}
}
})
})