vite无法自动更新问题

已于 2023-04-24 19:49:55 修改
阅读量563 收藏
点赞数
分类专栏： 问题集 文章标签： vue.js 前端 javascript
于 2023-03-11 16:58:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54334713/article/details/129465792
版权
在使用Vite构建的Vue应用中遇到了代码更新不自动同步的情况，即使刷新(F5)也无法解决。问题可能与文件名大小写不一致或者路由引用错误有关。检查并确保文件名和路由配置的大小写正确性是解决这个问题的一个步骤。
摘要由CSDN通过智能技术生成

问题

用vite构建的Vue应用，刚刚突然代码更新就不同步了，F5都不管事，必须从新启动服务，有遇到的吗？

解决

检查一下文件名大小写，路由 引用 这些地方
例如如下图片
在这里插入图片描述

明月落乌江
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ElementPlus按需自动导入VITE配置
03-08
自动导入使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。 这里导入的ElementPlus 使用格式： 名称 /> 例子： 图标名称，直接看官网...
vite搭建three.js的开发环境
01-06
只需保存文件，浏览器会自动刷新，展示更新后的3D效果。 通过这个基础的Vite和Three.js配置，你可以开始探索Three.js的无限可能，创建令人惊叹的3D应用程序。记住，不断学习和实践是提升技能的关键。在你探索的过程...
Vite前端部署：版本更新，即刻知晓
m0_46259935的博客
05-27 2678
本文提出了vite项目中版本变化的刷新问题，通过监听vite异常事件事件和维护比对发布版本时间戳两种方案，成功解决了自动刷新问题，并展示了demo相关代码和运行结果
vite保存后页面不更新
weixin_43932597的博客
08-31 1572
vite保存后页面不更新
vite3+vue3 HMR热更新无效 页面无法局部自动更新（需手动刷新页面）的问题解决
最新发布
m0_49280365的博客
07-11 1344
开发vite3+vue3项目 HMR 热更新无效、页面不能局部自动更新（需手动刷新页面）的问题。Vite和Vue版本不兼容。
Vite热更新不起作用
Leon4055的博客
10-31 9601
提示：文件夹名称严格注意大小写router路由中名称 和文件夹(目录), 文件名需要保证大小写一致。
Vue3+vite项目，保存代码后页面不刷新
海风依旧
10-20 3606
问题描述：Vue3+vite项目，ctrl+s保存代码后，页面不刷新，在vite.config.js配置了热加载hmr也没用，只能通过yarn dev重新打开
vite搭建的vue项目，保存后项目不会自动更新
m0_57996540的博客
06-30 1199
在vite.config.js配置好了热加载hmr，由于router中component引用的路径不小心写错，把大写的写成了小写，导致保存后，项目不会自动刷新。
vite项目修改依赖不更新，清除依赖缓存
qq_63608386的博客
03-07 1444
包管理器的 lockfile，例如 package-lock.json, yarn.lock，或者 pnpm-lock.yaml。Vite 会将预构建的依赖缓存到 node_modules/.vite;有些时候我们会直接修改依赖文件，但修改后没有更新，大多数情况下就是被缓存了。package.json 中的 dependencies 列表。可能在 vite.config.js 相关字段中配置过的。用 --force 命令行选项启动开发服务器。vite的缓存只会在以下情况发生时重新构建。
手写vite插件 - 打包后资源自动上传oss
10-08
Vite是由Vue.js作者尤雨溪开发的一款现代化的前端构建工具，它以其快速的热更新和按需编译特性在开发者社区中广受欢迎。而"手写vite插件 - 打包后资源自动上传oss"这个项目则进一步扩展了Vite的功能，使得构建完成后...
vite搭建vue3项目
09-06
Vite是由Vue.js的作者尤雨溪创建的一个现代化的前端构建工具，它利用了浏览器原生的ES模块导入功能，提供了更快的开发环境启动速度和热更新体验。与传统的Webpack相比，Vite在开发阶段提供了显著的优势。 首先，让...
vite-master.rar
08-07
当项目中的某个文件发生改变时，Vite会自动重新编译并推送到浏览器，实现了几乎即时的热更新。这种模式大大减少了等待时间和手动刷新页面的需要，让开发者可以更专注于编码。 Vite的另一个亮点是它的按需编译特性。...
vite还没发release版就已经火得不行了
页面仔小杨
12-14 310
vite是什么 vite一词翻译成中文：快，在尤大神介绍Vue3.0时提到了vite这个工具，其描述是这样的：针对Vue单页面组件的无打包开发服务器，可以在浏览器运行请求的vue文件。 它和我们使用的vue-cli的作用基本相同，相当于vue项目构建的升级产品。vite在开发的时候没有打包过程，ES模块源码直接传输给浏览器，浏览器使用自带的 <script module> 进行解析支持，通过 HTTP 请求进行每次 import，开发服务器拦截请求和对需要转换的代码进行转换。生产环境打包是通.
vite热更新失效解决方法
Hushingiwkw的博客
06-26 1698
一、可能出现这种情况是因为vite热更新机制的问题，因为在热更新过程中，有可能会出现缓存未清除的情况，导致浏览器页面不能同时更新。添加以上代码后，打包时会生成一个新的chunk文件，文件名为everything.js，这样就禁用了浏览器缓存。当我们正常写代码的时候，保存时浏览器显示的页面，用vite应该是同时进行的，但此时需要重启项目，这样就不对了。以上配置中，我们将端口设置为了443，这样可以避免缓存未清除的情况。在浏览器中清除缓存，重新加载页面。
vite + vue3 项目视图没有热更新问题解决
qq_41914185的博客
03-22 9363
vite + vue3 项目视图没有热更新问题解决；vite 构建的项目视图没有热更新。
Vite+Vue3实现版本更新检查，实现页面自动刷新
weixin_44624120的博客
02-10 7907
Vite+Vue3实现版本发布更新检查，实现页面自动更新，增加自动修改package.json的version，两种方式可选择
vue3 + vite 自动检测更新
06-08
要实现 Vue3 + Vite 的自动检测更新，可以使用以下步骤： 1. 首先，在项目中安装 `vite-plugin-checker` 插件，这个插件可以检测依赖包是否有更新。 2. 在 `vite.config.js` 中配置 `checker` 插件，例如： ```javascript import checker from 'vite-plugin-checker'; export default { plugins: [ checker({ // 检测频率，单位为秒，这里设置为 60 秒检测一次 interval: 60, // 检测更新的依赖包 packages: [ 'vue', '@vue/compiler-sfc', '@vue/runtime-core', ], }), ], }; ``` 3. 在 `main.js` 中使用 `setInterval` 定时检测更新，例如： ```javascript import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); // 每 5 分钟检测一次更新 setInterval(() => { location.reload(); }, 5 * 60 * 1000); app.mount('#app'); ``` 这样，每次启动应用时，`vite-plugin-checker` 会检测依赖包是否有更新，如果有更新，会在控制台输出提示信息。而定时检测更新的代码则会在应用运行时生效，每隔一段时间检测一次更新，并在有更新时刷新页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明月落乌江

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值