位置: IT常识 - 正文

vite+vue3搭建的工程热更新失效问题(vue3.0 vite)

编辑:rootadmin
vite+vue3搭建的工程热更新失效问题

推荐整理分享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中修改代码发现确实可以及时热更新,现在可以基本上可以确定是路由问题的啦,各位可以自己试下。

vite+vue3搭建的工程热更新失效问题(vue3.0 vite)

        怎么解决呢, 网上基本的解决方案是: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.
本文链接地址:https://www.jiuchutong.com/zhishi/299809.html 转载请保留说明!

上一篇:【2022-05-31】JS逆向之易企秀(逆算法怎么算)

下一篇:火遍全网的chatGPT(火遍全网的超燃神曲旋律震撼人心,听完热血沸腾!)

  • 增值税专票开错了可以作废吗
  • 公司代缴个人所得税做账
  • 实收资本的期末余额在借方还是贷方
  • 补缴房产税有滞纳金吗
  • 工程项目临时用工人员工工资怎么办
  • 一般纳税人加计抵减申报表怎么填
  • 收到退税如何记账
  • 红字发票冲红需要收回原发票吗
  • 小规模纳税人个税申报时间
  • 无形资产和固定资产的折旧
  • 房地产企业土地成本分摊方法
  • 工作过失扣工资合法吗
  • 员工报销油费计入个税吗
  • 建筑业交税会计分录
  • 增值税专用发票的税率是多少啊
  • 非营利组织取得稳岗补贴收入要交税吗
  • 退休人员再任职个人所得税
  • 汽修厂纳税多少
  • 机票的抵扣率是多少
  • 建筑工程发票是增值税专用发票吗,可以抵扣吗
  • 什么时候抵扣增值税
  • 电子发票收款人和复核人可以是一个人吗
  • 资产损失税前扣除备查资料
  • 高新企业申报指南
  • 金蝶采购发票怎么红冲
  • 1697509479
  • 单位给个人付款分录
  • 工资扣税标准计算方法
  • 研发费用计入什么科目符合资本化
  • 出售无形资产是什么科目
  • 事业单位政府预算
  • 碎片化对应什么
  • 销售商品全部退回
  • 自创商誉的确认
  • hue环境搭建
  • 总分机构分摊比例如何确定
  • 本文虚构
  • 防伪税控服务费怎么交
  • 协会收到的政府奖励会计处理
  • orb特征点匹配
  • css伪类选择器怎么用
  • 2、传统的目标设定过程目的重在________
  • 一般纳税人企业所得税如何计算
  • 印花税减免退回会计分录
  • 中标违约保证金怎么算
  • c语言realloc函数的用法
  • phpcms模板下载
  • sql语句优化实例
  • 收到生育津贴入什么科目
  • 公司不按股权比例分红是否合法
  • 电子发票查询真伪
  • 进料加工出口退税核销最新流程
  • 联营企业属于关联实体吗
  • 教育费附加退费
  • 广告服务费一般几个点
  • 债权资产包括哪些科目内容
  • 因企业增资而产生的费用
  • 法人名称是填公司名吗
  • 定额发票怎么领?
  • 多余备用金记账会计分录
  • 专家评审费需要上税吗
  • 企业搬迁补偿款免税的法律依据是什么
  • 工业企业生产什么
  • 磁盘缓存技术
  • mysql的事务处理
  • sql切割字段
  • 清空表内数据语句
  • win10预览版21277
  • solaris修改时间
  • 32位系统的电脑可以连接打印机吗
  • win7电脑全屏
  • win80xc0000001怎么修复
  • win8怎么添加wifi
  • linux012
  • linux实现shell
  • 税务局试用期
  • 北京车辆过户办理
  • 新公司印花税的缴纳
  • 西安税务办税服务厅
  • 税额差怎么计算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设