服務部分就不說了，這里就說前端部分诫欠，說實話主要還是要看文檔影涉，按照文檔的步驟來侮措，就不會錯。
https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/vue-integration.html
這里上個地址做盅，希望你們能打開
這里是main.js 的配置
因為看插件缤削，里面已經(jīng)寫了instatll方法，也掛載了this.$apm = 插件實例吹榴。所以我們這里只要大膽抄襲文檔
import { ApmVuePlugin } from '@elastic/apm-rum-vue'
Vue.use(ApmVuePlugin, {
router,
config: {
environment: process.env.VUE_APP_ENV, //環(huán)境自己可以根據(jù)當前是開發(fā)環(huán)境亭敢、測試環(huán)境還是生產(chǎn)環(huán)境 進行配置
serviceName: process.env.VUE_APP_ENV === "dev"?'frontendStandardDev':process.env.VUE_APP_ENV === "buildY"?'frontendStandardBuildY':'frontendStandard', //服務名稱 注意這個地方一定要寫對 后續(xù)上傳sourceMap也要一致
serverUrl: 'https://apm.gsgs10086.com', //這個地方是apm serve的地址
serviceVersion: VUE_APP_CONMITHASH, //這個地方是版本號 可以用每次發(fā)版版本號對應
eventsLimit: 30, //默認情況下，代理只能80每60000毫秒（一分鐘）發(fā)送一次事件 這個地方改為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锥余，這里有坑。自己注意
