vite 热更新失效问题:文件名大小写敏感问题

在Windows环境下,使用Vite进行开发时遇到热更新失效的问题。经排查发现,import语句引用的文件名必须与实际文件名大小写完全匹配,否则会导致热更新失效。修改文件名和import语句以保持大小写一致后,热更新功能恢复正常。建议统一使用小写文件名和import路径。
摘要由CSDN通过智能技术生成

        最近在折腾vite,刚开始热更新还可以,到后面热更新就失效了,导致调整界面每次都要重启开发服务器,非常麻烦。后来经过多次排查,发现import里引用的文件名必须和真实文件名大小写要完全一致,否则程序虽然能正常运行,但热更新会失效。

        我在我的项目里有两个文件一个是App.vue,一个是Login.vue.

        App.vue引用Login.vue,原来的代码是import login from"@\views\login\login.vue", 此时Login.vue不管怎么修改热更新均不起所用。做了3个测试:

  1. 修改文件系统的文件名:文件系统里的文件名Login.vue改成小写login.vue(windows文件系统支持目录、文件名大小写),和import语句里的文件名大小写保持一致,热更新恢复正常。
  2. 修改引入代码:把import login from"@\views\login\login.vue"的文件名改成大写,即:import login from"@\views\login\Login.vue",热更新恢复正常。
  3. 修改文件系统的路径大小写:文件名的大小写和import语句里的文件名保持一致,但把路径里的Views改成大写,热更新正常,说明文件夹大小写不会影响热更新。

        结论:在windows系统下,vue项目中的import语句所引用的文件名,必须和操作系统中的文件名大小写一致,否则热更新失效。建议:将文件名都改成小写,import也都用小写。

以下是我的环境:

开发环境:

        OS:Windows 11

        vite:3.2.7

开发模式:

        本机开发,本机启动vite服务器,浏览器在本机运行。

热更新配置(vite.config.ts):

        server:{

        ...

        //这部分一定要配置,否则不启动热更新

        hmr:{

                overlay:false

        }

        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值