vite+vue3项目埋点上报：接入阿里云日志服务vite+vue3项目埋点：阿里云日志服务，通过JavaScript

通过JavaScript SDK向Logstore写入日志，首先需要在阿里云日志服务中创建project和logstore；
项目相关文件：

//导入依赖模块，配置opts参数，创建slsTracker对象，通过该对象向日志服务发起上传日志请求
import SlsTracker from '@aliyun-sls/web-track-browser';

const opts = {
  host: '${host}', // 所在地域的服务入口。例如cn-hangzhou.log.aliyuncs.com
  project: '${project}', // Project名称。
  logstore: '${logstore}', // Logstore名称。
  time: 10, // 发送日志的时间间隔，默认是10秒。
  count: 10, // 发送日志的数量大小，默认是10条。
  topic: 'topic',// 自定义日志主题。
  source: 'source',
  tags: {
    tags: 'tags',
  },
}

export const slsTracker = new SlsTracker(opts);

//进行window挂载
import { slsTracker } from '@/utils/aliSls';

window.slsTracker = slsTracker;

//封装数据上报方法
interface Opt {
  action: string;
  msg?: any;
  [prop: string]: any;
}

type Level = 'info' | 'warning' | 'error';

export const Logger = (opt: Opt, level: Level = 'info') => {
  try {
    //可以自定义上报的数据及格式
    const data = { 
      env: import.meta.env.VITE_NODE_ENV,
      level,
      content: {
        ...opt,
      },
    };
    window.slsTracker.sendImmediate(data);
  } catch (e) {
    console.log('Logger Error' + ':' + e);
  }
};

在需要上报的地方进行埋点：

import { Logger } from '@/utils/logger';

Logger(
         {
           action: 'XXX',
           msg: 'XXX',
           ...
         },
         'error',
       );

最后就可以在日志库查看上报日志：