vue3+vite不热更新的解决方案

VIP文章 已于 2022-03-11 15:12:13 修改
阅读量1w 收藏 1
点赞数 2
文章标签： node.js html5 正则表达式
于 2022-03-03 11:32:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34070719/article/details/123249570
版权

问题背景

今天打开项目，更改了vue文件，发现项目不热更新，每次修改样式或者方法，都不会热更新，每次都需要刷新一下浏览器.
在网上搜了一下解决方案

请添加图片描述
大多数的解决方案都是一样，就是检查路由的，文件名和导入路径名是否大小写一致,检查了一番，路由名字都是一致的，不存在大小写不同的情况

  • 最终问题=>竟然是vite.config.js里面将Server的hmr属性设置成了false，这样，每次启动服务都不会进行连接热更新
    在这里插入图片描述
    将hmr 设置成true，问题解决了，项目可以热更新了
闲云野鹤_物竞天择
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于 Vue3 + Vite2+ Pinia + ts + windicss + Naive UI 的轻量级后台管理模板
11-20
V-Naive-Admin 是一个免费开源的中后台模版,使用了最新的vue3 Vite4 TypeScript等主流技术开发，开箱即用的中后台前端解决方案。 最新技术栈：使用 Vue3/Vite4 等前端前沿技术开发 TypeScript: 应用程序级 JavaScript 的语言 组件 (正在开发) 二次封装多个常用的组件 权限 内置多种动态路由权限生成方案 主题：自由灵活可配置的主题 国际化：内置国际化方案 Mock 数据 内置 Mock 数据方案 Naive-ui 尤大亲推的一款新 UI,完全 TypeScript 编写、组件多、主题配置方便、使用自由Pinia Pinia 是 Vue 的存储库，与 Vuex 功能相同，在使用方便比 Vuex 更舒服，代码提示让你爱不释手 axios 易用、简洁且高效的 http 库 Eslint 内置代码开发规范,解决多人开发之间书写风格不一致问题 测试账号: Admin / Admin123456!
Vite+Vue3实现版本更新检查，实现页面自动刷新
weixin_44624120的博客
02-10 7125
Vite+Vue3实现版本发布更新检查，实现页面自动更新，增加自动修改package.json的version，两种方式可选择
如何在Vue3中实现无缝热重载：提升你的开发效率
andy_68147772的博客
12-25 1732
如果你需要自定义HMR的行为，或者你正在使用其他构建工具（如Webpack），你可能需要手动设置HMR。以Webpack为例，你需要做以下几步：请注意，大多数现代Vue项目都会使用Vue CLI或Vite，因此你通常不需要手动配置HMR。这些工具已经为你做好了所有的工作。1、创建一个新的Vue项目这个命令会引导你通过一系列选项来创建一个新的Vue项目。Vue CLI会自动配置HMR。启动开发服务器这个命令会启动一个开发服务器，它默认支持HMR。进行开发。
vite5.0 + vue3.0 +js(ts) 刚建的项目 热更新无效的原因 是什么？
最新发布
wx12138wx的博客
03-13 427
vite5.0 + vue3.0 +js(ts) 刚建的项目 热更新无效的原因 是什么？
Vue实现项目重新部署后通知用户刷新网页
我不会敲代码
04-21 2826
各位小伙伴是否在项目上线后被用户问到：不是说新功能今天上线吗，怎么没看见。你：刷新下页面或者清除一下缓存用户：怎么清除缓存你：‍‍‍‍‍‍‍‍😫远程吧！或者是一个bug你明明已经修改并上线了，但是用户依然说bug存在，等等，为了让用户能够及时使用到新功能，就得解决这个问题。
解决vuecli3.0热更新失效的问题
10-17
今天小编就为大家分享一篇解决vuecli3.0热更新失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Vue】vue3 部分组件手动刷新也无法热更新
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
09-14 491
问题描述 Vue3 + Vite 项目中，对部分组件进行修改后保存，页面无变化。手动刷新页面，依旧无变化；Ctrl+F5刷新页面，依旧无变化； 以为是热更新失效了，参考百度解决后在 vite.config.ts中设置热更新： 但明明已经配置了，还是没有生效，最后看到这篇博客解决问题：点击跳转 解决方法 出现 bug 的原因大概率就是你当前组件在父组件中 import 的组件路径大小写错误导致的...
解决vite+vue3页面不会热更新的问题
可可爱爱的你吖的博客
08-02 3792
解决vite+vue3页面不会热更新的问题
【问题】如何解决vite+vue3搭建的工程热更新失效问题
freeGameBox的博客
06-02 3720
vite是一个基于ESM的轻量级前端开发工具，它可以快速地启动项目，实现模块热更新，提高开发效率。vue3是vue的最新版本，它引入了许多新特性，如组合式API，响应式数据源等。vite和vue3可以很好地配合使用，创建现代化的前端应用。然而，在使用vite+vue3搭建工程时，有时会遇到热更新失效的问题，即修改了代码后，页面没有及时刷新，需要手动重启项目才能看到效果。那么，如何解决这个问题呢？以上就是一些可能的原因和解决方法，希望对你有所帮助。如果你还有其他的问题或建议，请在评论区留言。
vue3+vite框架，修改代码后，热更新失效
scoutee的博客
04-07 854
解决方法：改一下配置文件vite.config.js。加一句 server：{hmr:true}
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 ........
vue3+vue-router4+vite4+pinia管理端动态路由权限控制，前端完整解决方案 已经实战和商用
03-20
vue3+vue-router4+vite4+pinia管理端动态路由权限控制，前端完整解决方案。 vue全家桶项目UI使用element-plus，包含完整的路由控制，动态路由和静态路由自主切换。 支持完整的国际化控制。 支持在管理端和其他端的自主切换和控制，一键配置完成。 集成各种图标，各种简单的示例，无需复杂的配置即可开包使用。 已经实战和商用。
Vue路由切换页面不更新问题解决方案
10-15
主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
【Vue3 + Vite + setup语法糖 + Pinia + VueRouter + Element Plus】开发框架
01-09
该项目集成了 Vue3 Vite setup语法糖 Pinia VueRouter Element Plus Axios 等，目前公司必备开发知识、已封装为二次开发框架，减少项目构建以提升开发效率，基础语法偏多，更适合于基础较弱的同学。其中包括了Element Plus 表格操作、弹窗组件的封装和复用，mixin公共方法的封装，以及后台管理系统中最重要的权限路由管理以及动态渲染左侧菜单等。以及对构建工具 vite.config.js 进行的简单配置、Pinia数据持久化的解决方案，嵌套路由的配置等。
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了，想试试新功能 工作中用的 umi+electron 项目大了，启动速度并不理想； 用 vite 试试，算一个储备方案 ^_^ Command npm run dev npm run build 如果只需要最基础的集成 Demo 请使用 或 分支 Note 踩坑记 import { write } from 'fs' 的这种形式会被 vite 编译成 /@modules/fs?import const { write } = require('fs') 这种形式就能用了 :winking_face: const {
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决方案，同时支持PC、平板、手机 。
基于Vue3 + Element Plus 的后台管理系统
07-22
基于Vue3 + Element Plus 的后台管理系统解决方案 该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 Vue3 + pinia，引用 Element Plus 组件库，方便开发快速...
vue3移动端适配的解决方案（老方案）
12-01
用于《vue3移动端适配的解决方案》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/127734001
vue3+vite 个人博客系统模板
12-28
Vue3 Vite 个人博客系统模板是一个基于最新的Vue3和Vite开发的个人博客系统模板，它提供了一套完整的前端开发解决方案，可以帮助开发者快速搭建自己的个人博客网站。 这个模板使用了Vue3作为主要的前端框架，Vite作为构建工具，这使得开发过程更加高效和简洁。同时，它还集成了一些常用的插件和组件，包括vue-router和vuex等，这些功能可以帮助开发者更加轻松地管理网站的路由和状态管理。 在模板的设计上，注重了用户体验和响应式布局，可以适配不同设备的屏幕大小。另外，它还提供了丰富的博客展示页面和个人信息管理功能，可以让用户轻松地撰写博客、管理文章和评论。 除此之外，这个模板还采用了一些优秀的前端开发实践，例如组件化开发、代码分割和懒加载等，这些技术可以帮助开发者更好地管理和维护自己的前端代码。 总之，Vue3 Vite 个人博客系统模板是一个功能丰富、高效和易用的个人博客搭建工具，它可以帮助开发者快速搭建自己的个人博客网站，展示个人的技术分享和生活感悟。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值