最近在折腾vite,刚开始热更新还可以,到后面热更新就失效了,导致调整界面每次都要重启开发服务器,非常麻烦。后来经过多次排查,发现import里引用的文件名必须和真实文件名大小写要完全一致,否则程序虽然能正常运行,但热更新会失效。
我在我的项目里有两个文件一个是App.vue,一个是Login.vue.
App.vue引用Login.vue,原来的代码是import login from"@\views\login\login.vue", 此时Login.vue不管怎么修改热更新均不起所用。做了3个测试:
- 修改文件系统的文件名:文件系统里的文件名Login.vue改成小写login.vue(windows文件系统支持目录、文件名大小写),和import语句里的文件名大小写保持一致,热更新恢复正常。
- 修改引入代码:把import login from"@\views\login\login.vue"的文件名改成大写,即:import login from"@\views\login\Login.vue",热更新恢复正常。
- 修改文件系统的路径大小写:文件名的大小写和import语句里的文件名保持一致,但把路径里的Views改成大写,热更新正常,说明文件夹大小写不会影响热更新。
结论:在windows系统下,vue项目中的import语句所引用的文件名,必须和操作系统中的文件名大小写一致,否则热更新失效。建议:将文件名都改成小写,import也都用小写。
以下是我的环境:
开发环境:
OS:Windows 11
vite:3.2.7
开发模式:
本机开发,本机启动vite服务器,浏览器在本机运行。
热更新配置(vite.config.ts):
server:{
...
//这部分一定要配置,否则不启动热更新
hmr:{
overlay:false
}
}