matomo 原名（piwik）主要用于统计用户访问记录，其原理是在宿主系统（有统计需求的系统）应用上放置探针，即系统对接，在不影响宿主系统正常运营的条件下，统计各种主要的指标，以达到数据分析和再加工的目的。
Matomo/Piwik中文网地址 内有vue-matomo简单介绍以及demo.
简单介绍完毕，正文开始！！！
首先引入vue-matomo
npm i vue-matomo在 main.js中配置
import VueMatomo from 'vue-matomo' Vue.use(VueMatomo, { host: `你自己的matomo地址`, siteId: '这个值页需要去matomo上去申请', // siteId值 // 根据router自动注册,需要注意的是如果有路由传值值太长的话会matomo会监听不到并报414，就不能使用此方法了 router: router, // 是否需要在发送追踪信息之前请求许可 // 默认false requireConsent: false, enableLinkTracking: true, // 是否追踪初始页面 // 默认true trackInitialView: false, // 最终的追踪js文件名，因为我这边的matomo版本比较老，所以使用的是piwik，现在版本新的话此值应该为matomo trackerFileName: 'piwik', debug: true, userId:'当前用户登录Id,可根据需求来设置，非必传，也可以在用户登录成功之后设置' })
到此，就已经可以监听到页面访问、加载时间、访问次数、访问时间、实时访客等等数据。
页面标题展示的就是在项目中router中设置的title.
需要注意的是如果有路由传值值太长的话会matomo会监听不到并报414，就不能根据router自动注册了。
我的解决办法是在app.vue中监听router，然后设置
watch: { $route (to, from) { this.$matomo.setCustomUrl('设置页面地址，可使用location.href，注意，如果使用的路由模式是hash模式，需要把url中的#号截取掉') this.$matomo.trackPageView(to.meta.title) //设置页面名称 }, },Ok，以上就完成了前端埋点。如果需要监听点击事件的话，在点击事件方法内添加matomo方法为：
//使用事件类别（视频，音乐，游戏...），事件动作（播放，暂停，时长，添加播放列表，下载，单击...）以及可选的事件名称和可选的数值来记录事件。 this.$matomo.trackEvent(category, action, [name], [value])