服务部分就不说了，这里就说前端部分，说实话主要还是要看文档，按照文档的步骤来，就不会错。
https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/vue-integration.html
这里上个地址，希望你们能打开
这里是main.js 的配置
因为看插件，里面已经写了instatll方法，也挂载了this.$apm = 插件实例。所以我们这里只要大胆抄袭文档
import { ApmVuePlugin } from '@elastic/apm-rum-vue'
Vue.use(ApmVuePlugin, {
router,
config: {
environment: process.env.VUE_APP_ENV, //环境自己可以根据当前是开发环境、测试环境还是生产环境 进行配置
serviceName: process.env.VUE_APP_ENV === "dev"?'frontendStandardDev':process.env.VUE_APP_ENV === "buildY"?'frontendStandardBuildY':'frontendStandard', //服务名称 注意这个地方一定要写对 后续上传sourceMap也要一致
serverUrl: 'https://apm.gsgs10086.com', //这个地方是apm serve的地址
serviceVersion: VUE_APP_CONMITHASH, //这个地方是版本号 可以用每次发版版本号对应
eventsLimit: 30, //默认情况下，代理只能80每60000毫秒（一分钟）发送一次事件 这个地方改为30
},
})
然后就是配置sourcemap了。
这里我们用到这两个插件，进入vue.config.js文件
GitRevisionPlugin 是获取当前git版本号的
const GitRevisionPlugin = require('git-revision-webpack-plugin')
const gitRevisionPlugin = new GitRevisionPlugin()
const ElasticAPMSourceMapPlugin = require("elastic-apm-sourcemap-webpack-plugin").default
...
plugins:
[ gitRevisionPlugin,
new webpack.DefinePlugin({
VUE_APP_VERSION: JSON.stringify(gitRevisionPlugin.version()),
VUE_APP_CONMITHASH: JSON.stringify(gitRevisionPlugin.commithash()),
VUE_APP_BRANCH: JSON.stringify(gitRevisionPlugin.branch()),
}),
],
new ElasticAPMSourceMapPlugin({
secret: "c01f0a3d3aca4c36143642fc4ccb70f0", //这是apm server的token带入
serviceName: process.env.VUE_APP_ENV === "dev"?'frontendStandardDev':process.env.VUE_APP_ENV === "buildY"?'frontendStandardBuildY':'frontendStandard', //这个对应初始化的服务名称
serviceVersion: gitRevisionPlugin.commithash(), ////这个对应初始化的版本号
serverURL: "https://apm.gsgs10086.com/assets/v1/sourcemaps", //这个是apm server地址/assets/v1/sourcemaps 其中/assets/v1/sourcemaps写死就可以 官方提供的是{host}:{port}/assets/v1/sourcemaps
publicPath: process.env.VUE_APP_ENV === "build" ? "https://tsw-cdn.gsgs10086.com/" : process.env.VUE_APP_ENV === "buildY" ? "https://ysw-cdn.gsgs10086.com/" : process.env.VUE_APP_ENV === "dev" ? "./" : "https://psw-cdn.gsgs10086.com/", //这个地方是你项目的域名 是绝对路径
logLevel: 'silent',
ignoreErrors: false,
}),
60d85ff1a43e83d1cbb95ee326fcec5.png
这里有个坑，需要配置下
8d5acab94239fba65032dfe2939fc3c.png
然后就可以了。
那个git版本的插件，目前是webpack5的， 我下了低版本的，因为我是webpack4，这里有坑。自己注意
