Vue Vite热更新不起作用的正确解决办法
更新时间：2022年03月15日 11:21:47 作者：Leon4055
热更新全称Hot Module Reload,常常在构建工具里面出现,下面这篇文章主要介绍了Vue Vite热更新不起作用的正确解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
解决方案：
提示：文件夹名称严格注意大小写
router 路由中名称 和文件夹(目录), 文件名需要保证大小写一致
正确示例:
{
path: 'show',
component: () => import("@/views/show/index.vue"),
}
show 目录名
index.vue 文件名
这样大小写都是与路由中一致的就不会出现问题
错误示例:
{
path: 'show',
component: () => import("@/views/Show/index.vue"),
}
show 目录名 (注意路由中是大写开头,这里是小写的,这就是问题所在)
Index.vue 文件名
这样写目录名或文件名与路由中写的大小写不一致就会出问题
这种情况的话如果不想改目录或文件名,可以修改路由中目录名或文件名
注意:
目录或文件名有驼峰命名的时候也一样需要注意大小写
附：vue3+vite不热更新的解决方案
今天打开项目，更改了vue文件，发现项目不热更新，每次修改样式或者方法，都不会热更新，每次都需要刷新一下浏览器.
在网上搜了一下解决方案，大多数的解决方案都是一样，就是检查路由的，文件名和导入路径名是否大小写一致,检查了一番，路由名字都是一致的，不存在大小写不同的情况
最终问题=>竟然是vite.config.js里面将Server的hmr属性设置成了false，这样，每次启动服务都不会进行连接热更新
将hmr 设置成true，问题解决了，项目可以热更新了
总结
到此这篇关于Vue Vite热更新不起作用的文章就介绍到这了,更多相关Vite热更新不起作用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue中跳转界面的3种实现方法,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
Vue中的watch是什么以及watch和computed的区别
这篇文章主要介绍了Vue中的watch是什么以及watch和computed的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vuejs从数组中删除元素的示例代码,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
这篇文章主要介绍了vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue 如何根据选择的月份动态展示日期对应的星期几，帮助大家更好的利用vue框架处理日期需求，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了解决echarts中横坐标值显示不全(自动隐藏)问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了Vue实现简单弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,下面这篇文章主要给大家介绍了关于vue实现自定义"模态弹窗"组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
文件拖拽上传功能现在已经随处可见,大家应该都用过了吧,那么它具体是怎么实现的大家有去了解过吗,今天我们一起来实现一下这个功能,并封装一个拖拽上传组件吧2024-03-03
这篇文章主要介绍了vue3.0安装element plus依赖的过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
最新评论