【Vue】vue3 部分组件手动刷新也无法热更新

最新推荐文章于 2024-12-15 21:26:32 发布

原创

最新推荐文章于 2024-12-15 21:26:32 发布 · 769 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #android #ecmascript

在Vue3+Vite项目中遇到修改组件后页面无法热更新的问题，尝试配置热更新无效。博客指出问题根源在于父组件导入子组件时路径的大小写错误。修正大小写后，热更新恢复正常。

问题描述

Vue3 + Vite 项目中，对部分组件进行修改后保存，页面无变化。手动刷新页面，依旧无变化；Ctrl+F5刷新页面，依旧无变化；

以为是热更新失效了，参考百度解决后在 vite.config.ts中设置热更新：

但明明已经配置了，还是没有生效，最后看到这篇博客解决问题：点击跳转

解决方法

出现 bug 的原因大概率就是你当前组件在父组件中 import 的组件路径大小写错误导致的。

比如这个就是错误的：

import capacity from "@/views/main/components/capacity.vue";
import workOrder from "@/views/main/components/workOrder.vue";
import runningState from "@/views/main/components/runningState.vue";
import callPolice from "@/views/main/components/callPolice.vue";