vite+vue3搭建的工程热更新失效问题及解决
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.
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天)
这篇文章主要介绍了vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
前端框架学习总结之Angular、React与Vue的比较详解
这篇文章主要跟大家分享了关于前端框架中Angular.js、React.js与Vue.js的全方位比较，文章介绍的非常详细，对大家进行区分对比这三者之间的差异区别很有帮助，需要的朋友可以参考借鉴，下面来一起看看吧。2017-03-03
Vue表单校验规则（rules）是一种用于验证表单数据的对象,它通常用于Vue.js框架中的表单组件中,可以在表单提交前进行数据验证,这篇文章主要给大家介绍了关于Vue.js rules校验规则的相关资料,需要的朋友可以参考下2024-02-02
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
这篇文章主要介绍了Vue.extend 和 data的合并策略 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了Vue+Mock.js模拟登录和表格的增删改查功能,需要的朋友可以参考下2018-07-07
这篇文章主要为大家详细介绍了基于element日历组件实现签卡记录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
浅谈在vue-cli3项目中解决动态引入图片img404的问题
这篇文章主要介绍了浅谈在vue-cli3项目中解决动态引入图片img404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue.js的灵魂是组件，而组件的灵魂是插槽。借助于插槽，我们能最大程度上实现组件复用。本文主要是对插槽的实现机制进行详细概括总结，在某些场景中，有一定的用处2021-06-06
这篇文章主要给大家介绍了关于Vue全局变量的定义及使用的相关资料,定义完全局变量后,我们可以在程序中的任何地方使用它们,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
今天小编就为大家分享一篇浅谈Vue中render中的h箭头函数，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论