vite+vue3搭建的工程热更新失效问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了vite+vue3搭建的工程热更新失效问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

我觉得这是一个坑，为啥，请看下面的描述

vite+vue3搭建的工程热更新失效问题

按理说，我们无需要关心这些额外的配置，但是现在确实影响到了我们的开发体验，官网上也没明确描述，仔细想想是什么原因导致了无法热更新的问题，因为刚搭建完工程开发的时候确实是可以热更新的，仔细想了想发现好像是添加完路由出现这个问题的，猜想如果没有路由是不是可以热更新呢，于是在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、一些配置文件的修改也不会实时更新，需要我们重启服务文章来源地址https://www.toymoban.com/news/detail-408687.html

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

到了这里，关于vite+vue3搭建的工程热更新失效问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！