安装监控包pnpm add alife-logger步骤 1新建监控插件文件src/plugins/arms.js/** * 阿里云ARMS监控 */ import { version } from ../../package.json export default { install: (app) { // 动态懒加载监控SDK不阻塞页面渲染 import(alife-logger).then(({ default: BrowserLogger }) { if (!BrowserLogger) return // 环境映射 const envMap { production: prod, staging: gray, development: local } // 初始化实例 const blInstance BrowserLogger.singleton({ pid: bxe15xxdyb9f4b60c6debfa15,// 替换成自己控制台的pid appType: web, imgUrl: https://arms-retcode.aliyuncs.com/r.png?, sendResource: true, // 采集静态资源报错img/css/js enableSPA: true, // SPA路由监控 release: version, // 上报项目版本号 environment: envMap[import.meta.env.MODE] || local }) // 全局注入页面内可 inject($bl) 使用手动埋点/上报错误 app.provide($bl, blInstance) }) } }步骤 2统一插件管理入口src/plugins/useinit.jsimport arms from /plugins/arms /** 在 main.js 里初始化 Vue 应用插件按需扩展 */ export const initAppPlugins app { app.use(arms) }步骤 3main.js 引入并执行初始化import { createApp } from vueimport App from ./App.vue import { initAppPlugins } from /plugins/useinit const bootstrap () { const app createApp(App)// 一行加载监控及所有插件initAppPlugins(app) initAppPlugins(app)步骤 4可选页面手动上报埋点 / 错误示例script setup import { inject } from vue const bl inject($bl) // 上报自定义业务错误 const reportErr () { bl.error(new Error(业务自定义异常)) } // 上报用户行为埋点 const trackClick () { bl.behavior(click, { btn: 拍照按钮 }) } /script极简复用清单换新项目只改 2 处arms.js里替换pid为新项目阿里云 ARMS 控制台的 PID按需调整envMap匹配项目的打包环境变量development/staging/production不需要采集资源报错就把sendResource: false。