Vue3 的 TypeScript 环境中完整对接百度统计

在 Vue3 的 TypeScript 环境中完整对接百度统计，您可以按照以下步骤操作：

首先，安装必要的依赖：

npm install --save @types/baidu-analytics

接下来，在 src 文件夹下创建一个名为 baidu-analytics.ts 的文件，并添加以下内容：

// src/baidu-analytics.ts
declare let _hmt: any[];

interface BaiduAnalytics {
  push: (...args: any[]) => void;
}

export function useBaiduAnalytics(): BaiduAnalytics {
  const push = (...args: any[]) => {
    if (typeof _hmt !== 'undefined') {
      _hmt.push(args);
    }
  };

  return {
    push,
  };
}

在 src 文件夹下的 main.ts 文件中引入并使用 baidu-analytics.ts：

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { useBaiduAnalytics } from './baidu-analytics';

const app = createApp(App);

const baiduAnalytics = useBaiduAnalytics();

// 替换为您的百度统计代码
const baiduAnalyticsCode = 'YOUR_BAIDU_ANALYTICS_CODE';

// 插入百度统计脚本
const script = document.createElement('script');
script.src = `https://hm.baidu.com/hm.js?${baiduAnalyticsCode}`;
document.body.appendChild(script);

// 监听路由变化
router.afterEach((to) => {
  baiduAnalytics.push(['_trackPageview', to.fullPath]);
});

app.use(router).mount('#app');

现在，您已经在 Vue3 的 TypeScript 环境中完整地对接了百度统计。每当路由发生变化时，都会将页面访问信息发送到百度统计。请确保替换 YOUR_BAIDU_ANALYTICS_CODE 为您自己的百度统计代码。