Vite热更新失效的问题办理

总结

• 如果时刷新页面时间会更新，可以确认一下[code]vite.config.js[/code]内有无设置[code]server:{hmr:true}[/code]，[code]true[/code]为热更新，[code]false[/code]为不热更新。
• 文件地址引用问题，如：文件大小写问题、同一个文件夹下存在大驼峰小驼峰的定名方式的2种文件！

前言

变乱是这样的，今天整理项目目录文件，准备把用vite搭建的项目中的目录结构重新归类一下，由于个人比力喜欢文件夹以大写驼峰式定名，整理文件目录时，把包括 views 文件夹下的路由文件也以这种定名方式整理，整理完后发现页面热更新失效了。

无法热更新尝试过的方法：

• 在vite.config.ts 中开启 hmr 热更新

重新run一下项目，更改页面样式后，页面还是不会热更新。

• 猜疑vite插件导致无法热更新

因为项目中利用了 Element-plus 自动导入插件，我开始猜疑是自动导入插件搞的鬼，表明自动导入插件，在main.ts 利用全局导入方式利用 Element-plus ，重启项目，更改项目某个文件后返回浏览器，依然无法热更新。

• 尝试依次卸载各种插件

• 卸载 tailwindcss ，删除 tailwindcss 设置文件和样式
• 重启项目后，修改页面，返回浏览器，还是无法热更新。
• …卸载别的三方插件

是的，直到我把整个项目文件依赖的三方插件都删的差不多，也还是无法热更新…

我开始疯狂吐槽 vite 真垃圾，同时在网上寻找各种关于 vite 无法热更新的帖子，可偏偏是那些写着 **文件夹名称请严格注意大小写 **这句话，我没有放在心上，因为我觉得我的文件目录挺规范的 (虽然和前面那句注意大小写没有任何关系)，然后就是打脸现场：

下面这张图是刚整理完目录后的目录以及路由文件：

发现什么问题了吗？ 是的，因为目录名和文件名称大小写差别等，这么设置的路由表，全部页面都不会热更新了 ！！

错误写法:

正确写法：

着实不想再瞎折腾了，我选择手动更改目录，把全部关于路由文件的文件夹和 .vue文件都改成了小写，终于，又可以正常热更新了：

关于对 文件夹名称严格注意大小写 这个问题的吐槽：

到此这篇关于Vite热更新失效的问题办理的文章就先容到这了,更多相关Vite热更新失效内容请搜索脚本之家从前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！