vue编译热加载特别慢（vite+vue3搭建的工程热更新失效问题）

       前段时间开发新的项目 
  
  
  
  
  
  
  
  
  
  
  ，由于没有技术上的限制 
  
  
  
  
  
  
  
  
  
  
  
 ，所以选择了vite+vue3+ts来开发新的项目

 


 


 


 


 


 


 


 


 


 


 


，一开始用vite来开发新项目过程挺顺利 
 
 
 
 
 
 
 
 
 
 
 ，确实比vue2+webpack的项目高效些（为什么选择vite）,但是过了一段时间后 
   
   
   
   
   
   
   
   
   
   
   
 ，不过怎么操作页面修改页面都无法及时刷新预览页面
 

 

 

 

 

 

 

 

 

 

 

，各种纠结                        。

        我觉得这是一个坑
 

 

 

 

 

 

 

 

 

 

 

 ，为啥                       ，请看下面的描述

         按理说 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，我们无需要关心这些额外的配置






















，但是现在确实影响到了我们的开发体验                                   ，官网上也没明确描述 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，仔细想想是什么原因导致了无法热更新的问题


































，因为刚搭建完工程开发的时候确实是可以热更新的                       ，仔细想了想发现好像是添加完路由出现这个问题的 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，猜想如果没有路由是不是可以热更新呢























，于是在App.vue中修改代码发现确实可以及时热更新 
  
  
  
  
  
  
  
  
  
  
  ，现在可以基本上可以确定是路由问题的啦 
  
  
  
  
  
  
  
  
  
  
  
 ，各位可以自己试下
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
。

        怎么解决呢

 


 


 


 


 


 


 


 


 


 


 


， 网上基本的解决方案是：router 路由中名称和引入文件路径及文件名需要保证大小写一致 
 
 
 
 
 
 
 
 
 
 
 ，但是我仔细对比了下 
   
   
   
   
   
   
   
   
   
   
   
 ，发现我项目中路由引用的路径名称没有写错
 

 

 

 

 

 

 

 

 

 

 

，再次陷入思考
 

 

 

 

 

 

 

 

 

 

 

 ，到底是啥原因                       ，那么只有可能是引入组件的方式不一致（因为我的路由页面特别简单只引入了一个页面） 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，于是将路由引入的方式由静态的改为动态的






















，管用了                                   ，但是想不明白 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，问题确实解决了






















。

  静态的写法（不刷新）

import Index from @/views/index.vue const routes = [ { path: /, component: Index } ]

   动态的写法（刷新）

const routes = [ { path: /, component: () => import(@/views/index.vue) } ]

 至此


































，我的问题解决                       ，下面来看其他导致没有热更新的问题

1                        、vite.config.ts没有配置热更新为false 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，改正

server: { hmr: true, //vue3 vite配置热更新不用手动刷新 }

2
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
、一次性出现了过多的错误























，这种情况一般出现在我们从别的地方复制一大段代码然后修改 
  
  
  
  
  
  
  
  
  
  
  ，即便是把所有的错误都解决了 
  
  
  
  
  
  
  
  
  
  
  
 ，热更新也失效

 


 


 


 


 


 


 


 


 


 


 


，这种情况得重启服务  
  
  
  
  
  
  
  
  
  
  
  。

3






















、长时间修改页面未重启过服务也会导致热更新失效 
 
 
 
 
 
 
 
 
 
 
 ，这种情况也得重启服务 
  
  
  
  
  
  
  
  
  
  
  
。

4  
  
  
  
  
  
  
  
  
  
  
  、一些配置文件的修改也不会实时更新 
   
   
   
   
   
   
   
   
   
   
   
 ，需要我们重启服务

changed tsconfig file detected: E:\****\tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.