vue3+vite框架,修改代码 CTRL+S 后,页面未发生改变

在Vue3结合Vite的项目开发中,修改组件后保存,页面未自动更新。即使手动刷新或Ctrl+F5,变化仍不显示。解决方法是通过在vite.config.ts配置文件中启用热模块替换(HMR),设置`hmr:true`。此外,确保router路径与组件文件名匹配,包括大小写,以保证正确加载修改后的组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述

在vue3 + vite 项目中,对组件进行修改后保存,页面无变化;
手动刷新页面,依旧无变化;Ctrl+F5刷新页面,依旧无变化;
只有重新npm run dev才会生效

解决办法

百度一番大概是需要手动配置热更新。
在vite.config.ts(我这里用到的是ts,如果是js应是vite.config.js)配置文件中配置红框中内容(hmr:true是配置热更新的关键

export default defineConfig({
  server: {
  	host: "localhost",
  	//vue3 vite配置热更新不用手动刷新
    hmr: true,
  }
})

注意注意注意

router的路径对应引入的component的名称要保持一致(注意文件名大小写

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值