import pathToname from '@/utils/pathname' // 请求拦截器 service.interceptors.request.use( config => { if (config.url.indexOf('/login') === -1) { // 设置用户名 const name = store.getters.name let urlName let curl = config.url curl = curl.split('?')[0] || curl // 将请求地址转为中文 for (const k in pathToname) { if (curl === k) { urlName = pathToname[k] } else { const kurl = k const turl = curl const karr = kurl.split('https://www.jb51.net/') if (karr[karr.length - 1] === '*') { // 代表最后一位为* karr.splice(karr.length - 1, 1) const karr1 = turl.split('https://www.jb51.net/') karr1.splice(karr1.length - 1, 1) const str = karr.join('https://www.jb51.net/') const str2 = karr1.join('https://www.jb51.net/') if (str === str2) { urlName = pathToname[k] } } else { karr.splice(karr.length - 2, 1) const str = karr.join('https://www.jb51.net/') const karr1 = turl.split('https://www.jb51.net/') karr1.splice(karr1.length - 2, 1) const str2 = karr1.join('https://www.jb51.net/') if (str === str2) { urlName = pathToname[k] } } } } // urlName = urlName || '其他' urlName = urlName || config.url window._paq.push(['setCustomUrl', `${document.URL.split('/#')[0]}${curl}123`]) window._paq.push(['setDocumentTitle', urlName]) window._paq.push(['setUserId', name]) window._paq.push(['trackPageView']) }
图片依然等回去上传
当然,我这里用的是js的方式原理是一样的,上面的代码,是我对统计的地址名做了中文化的匹配.因为接口的多样性,需要做一个处理,比如说,路径传参中, 其实只是参数变了,地址没变, 这个时候不能算一个新的地址, 所以就需要匹配处理. 代码没写太复杂, 一步一步深入,基本上很容易懂.
附上pathname的代码. 用于将地址匹配为中文统计,:
const changeName = { // goods相关API '/pdc/api/v1/dic/query': '基础档案管理-获取货品信息', '/pdc/api/v1/product/query': '基础档案管理-获取货品详情', // role相关API '/api/root/list': '基础-获取菜单权限', '/api/createRole': '权限管理-创建角色', '/api/checkRoleName': '权限管理-查询角色是否存在', '/api/custom/master/permission': '权限管理-获取外部客户角色列表', '/api/internal/user/info': '基础-获取用户信息', // statement相关API '/statement/financialForm': '财务管理-获取JIT财务列表', '/statement/export': '财务管理-导出JIT财务报表', '/statement/count': '财务管理-获取JIT数据总条目', // trade相关API(待定) // user相关API '/api/internal/user/list': '权限管理-获取外部用户列表', '/api/internal/custom/list': '权限管理-获取外部客户列表', '/user/create': '权限管理-创建用户', '/user/update': '权限管理-修改用户信息', '/api/user/password': '权限管理-修改用户密码', // 订单列表相关API '/order/api/v1/orderConfirmation': 'B2B交易管理-提交订单', '/order/api/v1/serviceApprove': 'B2B交易管理-确认订单', '/order/api/v1/serviceRefuse': 'B2B交易管理-拒绝订单', '/order/api/v1/getDispatchSelectInfo': 'B2B交易管理-获取订单字典数据', '/order/api/v1/import/productList': 'B2B交易管理-导入订单数据', '/order/api/v1/*/orderInformation': 'B2B交易管理-获取订单基本信息', '/order/api/v1/*/customerCode': 'B2B交易管理-检查客户代码是否存在', '/order/api/v1/*/discount': 'B2B交易管理-导入订单折扣', '/order/api/v1/*/occupyInventory': 'B2B交易管理-导出占库结果', '/order/api/v1/createDispatch': 'B2B交易管理-提交发货单', '/order/api/vi/dispatchCancel': 'B2B交易管理-取消发货单', '/order/api/vi/*/orderCancel': 'B2B交易管理-取消订单', '/order/api/v1/dispatchApprove': 'B2B交易管理-同意发货单', '/order/api/v1/dispatchRefuse': 'B2B交易管理-拒绝发货单', '/order//api/v1/confirmSubmissionApproval': 'B2B交易管理-订单提交审批', '/order/api/v1/orderStatus': 'B2B交易管理-获取订单状态', '/bff/api/v1/dispatch/*': 'ODS管理-获取发货单基本信息', '/bff/api/v1/receive/*': 'ODS管理-获取收货单基本信息', '/bff/api/v1/vend-cust': 'ODS管理-获取客商列表信息', '/bff/api/v1/warehouses': 'ODS管理-实时获取仓库信息', '/bff/api/v1/dict/type': 'ODS管理-仓库类型查询', '/bff/api/v1/dispatch/_export': 'ODS管理-导出发货单信息', '/bff/api/v1/receive/_export': 'ODS管理-导出收货单信息', '/bff/api/v1/dict/type/_list': 'ODS管理-查询字典数据', '/bff/api/v1/dispatch/_page': 'ODS管理-查询发货单列表', '/order/api/v1/orderList': 'B2B交易管理-查询订单列表', '/order/api/v1/orderDetail': 'B2B交易管理-获取订单商品列表', '/order/api/v1/orderDispatchInfo': 'B2B交易管理-获取订单发货单信息', '/order/api/v1/dispatchList': 'B2B交易管理-获取订单发货单列表', '/order/api/v1/confirm': 'B2B交易管理-修改占库结果', '/order/api/v1/toBeConfirmedDispatch': 'B2B交易管理-查看历史发货单信息', '/order/api/v1/cumulativeState': 'B2B交易管理-获取占库结果信息' } export default changeName
其他的就不赘述了,中文转化方面, 各人有各人的理解, 能达到效果就行.
js方式的统计也是类似的.有需要的话,评论留言,我后续传上来.
结语
Vue-matomo流量统计这块,就算整理完成了, 实际项目中已经正常使用,所以正常来讲应该不会出现问题. 加油, 各位