vite3+vue3 HMR热更新无效 页面无法局部自动更新(需手动刷新页面)的问题解决

结论:Vite和Vue版本不兼容(Vite@3.2.10和Vue@3.4.31)

解决:降低Vue的版本到@3.3.4

下面是问题排查和解决过程:

一、现象

1、修改.vue单组件文件【LoginForm.vue】(修改了其<template>),但页面无法进行局部自动更新,但修改.ts、.js文件可以自动刷新页面。

2、vscode终端控制台可以打印【10:55:18 [vite] hmr update /src/views/sys/login/LoginForm.vue  】,浏览器控制台(级别:详细)也可以打印【[vite] hot updated: /src/views/sys/login/LoginForm.vue】,但页面就是不局部自动更新。

二、猜测及进一步测试

所以猜测是vite HMR对于.vue文件的处理可能存在问题。于是进一步分别修改<tempalte>、<script>、<style>三个部分的内容,发现只有改<style>部分的内容浏览器才会局部自动更新。合理猜测HMR(热模块替换)对于Vue组件的模板和脚本部分没有正常工作,而对于样式部分则正常工作。

三、查找资料

查看vite官网关于HRM热更新的资料

点击链接进去,是vite-plugin-vue(@vitejs/plugin-vue)【Vite 官方为 Vue3 提供的插件,@vitejs/plugin-vue为包依赖名】的github项目仓库。

所以“Vite内置了HMR到Vue单文件组件(SFC)” ==>“Vite内置了HMR到 vite-plugin-vue中”==>HMR 功能和@vitejs/plugin-vue有关。

于是了解@vitejs/plugin-vue

介绍:

@vitejs/plugin-vue 是一个针对 Vue 框架的 Vite 插件。它的主要功能是支持基于 Vite 构建的 Vue 项目,为 Vite 提供对 Vue 单文件组件(SFC)的支持。

具体来说,@vitejs/plugin-vue 可以在 Vite 构建过程中处理 Vue 单文件组件(SFC),将其转换为 JavaScript 模块以便在浏览器中使用。这个插件对SFC的解析“主要”是使用 Vue 3 的编译器(如:@vue/compiler-sfc)来处理 .vue 文件的<template><script>部分,使用postcss、css预处理器等来处理<style>部分。

因此,@vitejs/plugin-vue 使得 Vite 能够理解 Vue 的 SFC,并将其编译为浏览器可以执行的代码。而 Vite 的 HMR 功能则确保在编译过程中,当修改了 SFC 时,应用能够实时更新,从而提高开发效率。

了解完毕后,得出结论

Vite 内置的 HMR 功能与@vitejs/plugin-vue插件是密切相关的,而 @vitejs/plugin-vue对Vue3 单文件组件(SFC)的编译解析离不开Vue3模板编译器。因此,@vitejs/plugin-vue的版本和Vue3

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值