针对情况: 只有某个项目打开不会热更新,其它项目热更新正常

表现:vscode保存后浏览器不会自动更新页面,每次修改要刷新浏览器才有效果,效率低下

解决方式1

由于依赖问题导致的热更新失效

删除node_modules,再使用npm install重新下载依赖,(或者重新克隆项目安装依赖)运行即可

解决方式2

由于组件名称问题导致的热更新失效

  • 切记切记,组件引入名称问题,大小写一定要一致,如果页面名称是大写,那引入的的组件名称也是大写
  • router/index.ts中定义的路由,如果引入的组件也存在名称问题,可能导致整个项目都不能热更新
  • 无论是统一大写,还是统一小写,都可以,主要看vue文件名称
    在这里插入图片描述

检测方式:

自己新建一个空白vue页面,然后清空原有router/index.ts内容(注意备份),只引入自己新建的页面,看看修改页面内容保存后浏览器会不会更新,就知道是不是这个问题了,如果会更新,就是组件名称导致的问题了


到这里,其实你是不是也有疑问,我之前也用vite创建了很多项目,好像都没有出现过这个问题,组件名称影响热更新的情况怎么会突然出现呢,这个项目我刚创建的时候页面是正常使用的,写着写着就开始出现这个问题,到底是什么导致的


解决方式三-离谱

我项目中所有自建的组件页面我都统一了名称,但是在我使用vuedraggable拖拽组件的时候发现又导致热更新失效了,然后无论我的名称怎么变化,大小写统一,还是另外取名都不行,只要引用并且使用了这个插件,热更新就失效了,我开始怀疑是不是安装的插件内部存在组件名称的问题间接导致了热更新不正常,因为这个插件又是必须使用的,但是无论如何修改名称还是一样的结果,没办法,我开始了我下面的操作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 我想试试是不是环境不同就不会出现这种情况了,所以我使用vite创建了一个新项目,涉及到所有的插件都使用yarn add安装最新的,然后再把老项目所有的vue和ts页面内容都移植过去,调试到正常运行,这里我再使用vuedraggable就不会影响热更新了,我就庆幸我找到了原因,应该就是什么依赖冲突了

  • 然后我不服输还想排查一下老项目为什么会出现这个问题,所以我把新项目的package.json文件中所有内容复制替换到老项目中,删除老项目的node_modules文件夹后,重新yarn install ,结果,我发现竟然可以运行了!!!,所以此刻我更加确定了是依赖导致了组件名称会影响热更新

  • 但是我还是想要确定到底是哪个依赖或插件影响了我的热更新,之前网上的方法都试过了都不行,我一定要一一排查找到根本原因为大家谋福利,所以我又把老项目的package.json退回到原本的内容,删除node_modules文件夹,重新yarn install,准备依次删除可能影响的依赖和插件慢慢试,但是我发现即使我的所有插件都退回到最初的版本还是可以运行,what!!!!此时我的package.json文件内容没有任何变化啊,所以我前前后后到底经历了什么,这样算下来好像什么都没有改啊,要知道老项目的node_modules文件夹我删除过install过很多次了,缓存也清理过很多次了,都没有解决组件名称影响热更新的问题,所以也不可能是这个原因啊……

  • 虽然到此问题解决了,但显然我也不知道到底是如何解决这个问题了,莫名其妙的开始,莫名其妙的解决,只知道老项目和新项目都可以使用了,热更新正常,真离谱啊家人们

这一波操作之后,现在即便大小写名称不统一也正常了,上天真是给我开了一个玩笑,
不过老项目虽然能正常热更新了,但是我已经有了阴影,总感觉什么依赖有问题,所有我还是决定使用新创建调试正常的项目,
折腾了几天的血泪结果,必须要记录下来!!!!
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐