vite项目hmr热更新问题

项目背景

最近发现公司项目又个奇怪的现象,就是在开发阶段出现页面更新,浏览器端没有更新的现象,页面没有任何错误,很奇怪!于是就开始我的排查之路!

简单分析

首先,我考虑了几种可能的原因:

  1. 可能配置问题
  2. 可能工程问题
  3. 依赖问题

于是,我从配置入手。根据官方文档,Vite 默认开启了 HMR(热模块替换)。为了更保险,我在服务器配置中显式设置了 hmr: true,但是问题依旧没有解决。更奇怪的是,问题发生时,我看到浏览器打印了 HMR 更新的日志,显示更新了 src/App.vue,但页面内容却没有随之更新。

视频复现原文

通过分析视频和控制台日志,确认了 HMR 更新的通知和浏览器端的打印信息都收到了,但页面并没有重新渲染,显示内容没有变化。这个现象让我更加困惑,似乎是 HMR 正常工作,但页面更新机制出现了问题。

vite 创建最小demo

为了进一步排除问题,我创建了一个最小的 Vite 项目,并在其中重现了这个问题。在最小项目中,我只引入了vue的全家桶的一个demo,不包含npm私有库的包使用 HMR 进行更新。进一步判断是不是私有库的问题还是全家桶问题!

视频复现原文

测试结果: 毫无疑问,我猜到结果啦! 没有什么问题!那就是私有库开发的有问题或者有啥不规范的!那么就下来,就开始精简项目中的最下demo 啦!

项目最小demo

只保留初始化配置。 正常 保留初始化配置, 初始化stroe 不正常

排查项目最小demo 的 stroe

发现去掉store 有个获取菜单的请求,直接把封装的http 请求 改成一个一个模拟的new Promise 的借口。发现正常, 发现是封装的http 有问题,因为http 是另外一个私服包,所以初步确定http 问题,但是http 写的太复杂,太乱啦!关键还是得处理,不知道重写还是修改代码!

排查HTTP 请求库

发现是 AxiosTransform 和 ** return new Promise((resolve, reject) => {** 没有错误上抛以及类型问题造成的在项目使用的使用中断和导出的不是纯净的 ES 模块,导致 Vite 的热更新链在该模块处中断,总之,HTTP 很多问题!所以我决定重写http!

相关推荐
一位搞嵌入式的 genius12 小时前
深入理解 JavaScript 异步编程:从 Event Loop 到 Promise
开发语言·前端·javascript
m0_5649149212 小时前
Altium Designer,AD如何修改原理图右下角图纸标题栏?如何自定义标题栏?自定义原理图模版的使用方法
java·服务器·前端
方安乐13 小时前
react笔记之useCallback
前端·笔记·react.js
小二·13 小时前
Python Web 开发进阶实战:AI 伦理审计平台 —— 在 Flask + Vue 中构建算法偏见检测与公平性评估系统
前端·人工智能·python
@good_good_study13 小时前
FreeRTOS ARM简明架构
arm开发·架构
维构lbs智能定位13 小时前
人员定位软件系统从核心架构、关键功能、主流技术、典型应用与选型要点详解
架构
走粥13 小时前
选项式API与组合式API的区别
开发语言·前端·javascript·vue.js·前端框架
We་ct13 小时前
LeetCode 12. 整数转罗马数字:从逐位实现到规则复用优化
前端·算法·leetcode·typescript
国科安芯13 小时前
RISC-V架构抗辐照MCU在航天器载荷中的SEU/SEL阈值测试与防护策略
单片机·嵌入式硬件·安全·架构·安全威胁分析·risc-v
方安乐13 小时前
react笔记之useMemo
前端·笔记·react.js