vue之babel自动埋点

公司项目是vue单页面技术,这天组长对我说,为了凸显我们的作用,做点外行或者新手看起来高深的东西,例如自动埋点。
当时我的表情先是在这里插入图片描述
然后摸鱼摸习惯了,就是这种状态。
在这里插入图片描述
最后组长说领导的态度决定我们的绩效,没办法,为了money,无奈打开了老朋友——google。

搜索自动埋点,果然——现成的劳动果实,真香!

原文: 手撸自动埋点.
给作者点个赞!!!
不过用于我们的项目有几个要改动的地方:

在这里插入图片描述

在这里插入图片描述
这里如果参数错误就跳过的写法对于我们来说不合适,所以给注释了。

在这里插入图片描述
在这里插入图片描述
这里的路径要兼容一下,报错原因小白看不懂(别装小白)。
在这里插入图片描述

在这里插入图片描述

因为是vue项目,babel-loader处理的是项目下所有的.js文件
在这里插入图片描述
所以我有了下面的操作:
在这里插入图片描述
在这里插入图片描述
可悲哀的发现好像一点效果没有。。。
在这里插入图片描述
大佬写的代码是没问题的,于是我尝试在.babelrc中写入,于是有了下面的操作:
在这里插入图片描述
结果成功了?!!
在这里插入图片描述
张三表示很欣慰!
在这里插入图片描述
为此本人做了总结:这是babel插件,当然得写在babel相关的里面了,而.babelrc正是处理.vue文件的js的。
咳咳,至于插件的开发过程,原文写的很详细,插件源码,举例都有,感谢原文作者的奉献。
在这里插入图片描述
至于我的源码,不给!(我才不是懒得上传)
最后,下班。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
回答: 在浙里办中使用Vue进行埋点的方法如下: 1. 首先,确保你的代码在npm run build打包后生成的index.html能正常显示业务内容。如果页面空白,可能是config里面的文件目录写错了。 2. 浙里办接收的文件目录是/build,但是Vue CLI生成打包后文件的目录是dist。你可以在文件夹根目录(和package.json同级)新增gbc.json文件,告诉浙里办你的输出目录。示例gbc.json文件内容如下: ``` { "type": "gov-build-config", "version": "1", "outputPath": "dist", "entryHtml": "/index.html" } ``` 3. 上传并编译成功后,你可以查看页面是否正常显示。但是注意,异步请求和单点登录等功能可能还没有实现。关于这些难点,可以参考下文。 4. 对于异步请求,你可以使用mgop进行处理。你可以下载@aligov/jssdk-mgop,并引入import { mgop } from '@aligov/jssdk-mgop'。然后按照官网的用法进行调用。 5. 关于埋点,你可以在网上搜索相关资料,可能会有一些教程或指南。你可以根据自己的需求进行查看和学习。 6. 这些是我目前能想到的方法,如果后续有其他想法,我会再告诉你。希望对你有帮助! #### 引用[.reference_title] - *1* *3* [浙里办接入流程(施工完毕)](https://blog.csdn.net/dom_l_z/article/details/126655637)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [浙里办接入h5(vue项目)------相关流程说明](https://blog.csdn.net/y_yinkedada/article/details/121402514)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值