位置: IT常识 - 正文
推荐整理分享vite+vue3搭建的工程热更新失效问题(vue3.0 vite),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:vue3环境搭建,vue工程搭建,vue3.0搭建,vue3.0 vite,vue工程搭建,vue3搭建项目,vue工程搭建,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.上一篇:【2022-05-31】JS逆向之易企秀(逆算法怎么算)
下一篇:火遍全网的chatGPT(火遍全网的超燃神曲旋律震撼人心,听完热血沸腾!)
友情链接: 武汉网站建设