Nuxt4 官网访问来源统计的实现

海上彼尚2026-03-28 9:17

今天我遇到一个值得记录的问题，场景是这样的：官网后台需要做访问统计，我得把访问来源和访问目标的 URL 传递给后端。绕了好一阵子，才终于理清楚。

项目结构上，Nuxt 4 负责官网展示，后端是 Java 服务。核心在于理清请求链路：需要将用户访问 Nuxt 4 时的请求头信息传递到 Java 服务端。整个流程是"用户 → Nuxt 4 服务端 → Java 后端"，这样就能实现来源统计。至于站内统计，监听路由变化发送请求即可。

最终我用了两个文件来落地这个方案，记录一下作为参考：

javascript 复制代码

// app/plugins/visit.client.ts

import { recordVisit } from '@/api' // 统计接口

export default defineNuxtPlugin(() => {
    const router = useRouter()
    router.afterEach((to, from) => {
        // 第一次进入不记录
        if (to.fullPath === from.fullPath) return
        const url = window.location.href || ''
        recordVisit(url)
    })
})

javascript 复制代码

// app/plugins/visit.server.ts

import { recordVisit } from '@/api' // 统计接口

export default defineNuxtPlugin(async () => {
    // 只在服务端执行
    if (!import.meta.server) return
    try {
        const url = useRequestURL()
        const headers = useRequestHeaders()
        recordVisit(url.href, headers.referer || '', headers).then(() => {
            console.log('记录访问成功')
        }).catch(() => { })
    } catch (e) {
        console.error('SSR 记录访问失败:', e)
    }
})