【问题已解决】Vue管理后台,点击登录按钮,会发起两次网络请求(竟然是vscode Compile Hero编译插件导致的)

问题

Vue+Element UI 做的管理后台,点击登录按钮,发现 接口会连续掉两次发起两次网络请求,但其他接口都是正常调用的,没有这个问题,并且登录按钮也加了loading,防止重复点击,于是开始进行排查

排查

request文件以及 接口封装都排查了 没有发现问题,最后通过打断点,一步一步调试,发现是因为 this.$store.dispatch("Login", user),是dispatch触发了两次方法,发起了两次网络请求

找到问题了,想换一种方法来写登录这块的逻辑,但是代码改动比较大,而且治标不治本,

思考

这种写法本身没有什么问题,那么为什么会触发两次呐?

最后发现竟然是vs code中的下载了插件导致的

bash 复制代码
Vs code中Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro插件

在VSCode安装了这个插件后,会有这个问题,保存后会在我本地文件store里,生成dist文件夹,里面有同名的文件(名字.devjs),所以每次执行actions都运行两次

解决办法

果断选择卸载该插件,

小小记录一下~ 实在是没想过这方面会影响,一直以为是代码写的有问题,排查了一下午的时间

Tips

如果发现 卸载了插件,页面有报错,

报错信息为"Module build failed (from ./node_modules/sass-loader/dist/cjs.js)"错误

清理缓存 有时缓存问题可能导致编译错误。尝试清理缓存并重新构建项目

在终端输入

npm cache clean --force

npm install

即可解决该问题~ (我遇到了哈~小小记录一下)

相关推荐
HelloReader几秒前
创建第一个 Qt Quick 应用从零到窗口弹出(四)
前端
HelloReader3 分钟前
Qt 项目构建入门CMake 完全指南(三)
前端
用户9083246027310 分钟前
Spring AI + RAG + SSE 实现带搜索来源的智能问答完整方案
前端·后端
GISer_Jing14 分钟前
阿里开源纯前端浏览器自动化 PageAgent,[特殊字符] 浏览器自动化变天啦?
前端·人工智能·自动化·aigc·交互
清风徐来QCQ33 分钟前
js中的模板字符串
开发语言·前端·javascript
成都渲染101云渲染666638 分钟前
Houdini+Blender高效渲染方案(高配算力+全渲染器兼容)
前端·系统架构
SuperEugene1 小时前
Vue3 + Element Plus 表格实战:批量操作、行内编辑、跨页选中逻辑统一|表单与表格规范篇
开发语言·前端·javascript
极梦网络无忧1 小时前
基于 Vite + Vue3 的组件自动注册功能
前端·javascript·vue.js
Predestination王瀞潞2 小时前
5.4.3 通信->WWW万维网内容访问标准(W3C):WWW(World Wide Web) 协议架构(分层)
前端·网络·网络协议·架构·www
爱学习的程序媛2 小时前
【Web前端】优化Core Web Vitals提升用户体验
前端·ui·web·ux·用户体验