vite保存后页面不更新

已于 2022-08-31 15:52:34 修改
阅读量1.5k 收藏 3
点赞数 5
文章标签： vue.js 前端
于 2022-08-31 15:49:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43932597/article/details/126625330
版权

vite@3.0.9

问题：

把a改成b，保存后疯狂刷新，页面就是始终显示a
重新 run dev，就会显示b
如果再改成c，刷新，页面还是b

控制台没有任何警告、错误提示
......

原因：

有人把项目部分文件名的大写换成小写了，比如
page/Home.vue  ===> page/home.vue

代码改了，ok，没问题，我pull下来了
但是文件的名字还是大写的Home............

hnxycxd
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue路由切换页面不更新问题解决方案
10-15
主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vite -- NPM 依赖解析和预构建 && 热更新
每天都要努力学习哦~~
02-06 3458
默认的依赖项发现为启发式可能并不总是可取的。在你想要显式地从列表中包含/排除依赖项的情况下, 请使用optimizeDeps 配置项。当你遇到不能直接在源码中发现的 import 时，或就是典型的用例。例如，import 可能是插件转换的结果。这意味着 Vite 无法在初始扫描时发现 import —— 它只能在浏览器请求文件时转换后才能发现。这将导致服务器在启动后立即重新打包。string[]在预构建中强制排除的依赖项。CommonJSCommonJS 的依赖不应该排除在优化外。
vite3 + pinia + axios 升级 vite4 + pinia + axios 后，项目在本地运行正常，打包部署后无法正常打开页面，并控制台报错，排查过程
ktianc的博客
01-30 2977
报错：Uncaught TypeError: Cannot read properties of undefined (reading ‘_s‘) 场景描述：项目进行依赖包更新后，本地可以正常运行访问使用，但是经过打包部署到线上后，显示一直在加载中，并且控制台报错。
vite项目修改依赖不更新，清除依赖缓存
最新发布
qq_63608386的博客
03-07 1037
包管理器的 lockfile，例如 package-lock.json, yarn.lock，或者 pnpm-lock.yaml。Vite 会将预构建的依赖缓存到 node_modules/.vite;有些时候我们会直接修改依赖文件，但修改后没有更新，大多数情况下就是被缓存了。package.json 中的 dependencies 列表。可能在 vite.config.js 相关字段中配置过的。用 --force 命令行选项启动开发服务器。vite的缓存只会在以下情况发生时重新构建。
Vue3+vite项目，保存页面不刷新，重启才刷新问题
jiang1726817390的博客
05-17 1921
大写写成小写不会报错，而且重启才有效，导致排查了很久，所以写代码要细心。router中component引用路径大写的写成了小写。
升级vite4 报错
susanliy的博客
05-26 1322
将插件 “vite-plugin-theme”: “^0.8.1” 改为 “vite-plugin-theme”: “git+https://github.com/tt-sevth/vite-plugin-theme.git”，另外可以把预加载卸载了，因为vite3版本之后就内置了预加载功能。vite-plugin-theme插件造成的。vben vite2 升级vite4报错。
vite搭建的vue项目，保存后项目不会自动更新
m0_57996540的博客
06-30 1028
在vite.config.js配置好了热加载hmr，由于router中component引用的路径不小心写错，把大写的写成了小写，导致保存后，项目不会自动刷新。
vite无法自动更新问题
qq_54334713的博客
03-11 527
vite无法自动更新问题
Vite热更新失效
Ly
03-14 3218
vite热更新无效的解决办法，vue3+vite不热更新的解决方案，vue3+vite热更新失效问题，vue3无法热更新，1、每次更新代码都要重启项目是全量热更新的问题，如文件大小写问题、同一个文件夹下存在大驼峰小驼峰的命名方式的2种文件。 2、如果刷新页面会更新，可以确认一下vite.config.js内有无配置server:{hmr:true} 3、如果是页面级组件出现问题，极有可能是路由的文件或命名问题，引用组件则是组件引用地址和组件文件的写法问题！
Vue3+vite项目，保存代码后页面不刷新
海风依旧
10-20 3369
问题描述：Vue3+vite项目，ctrl+s保存代码后，页面不刷新，在vite.config.js配置了热加载hmr也没用，只能通过yarn dev重新打开
手写vite插件 - 打包后资源自动上传oss
10-08
非常适合想学习vite插件但是又不知道如何入手的伙伴，或者想面试找工作的伙伴
vite-plugin-full-reload::recycling_symbol:修改文件后自动重新加载页面
05-12
修改文件后自动重新加载页面 为什么？ :thinking_face: 使用，我想查看服务器渲染的布局和模板的更改，而无需手动重新加载页面。 另外，在中，当触发Rails重装时会生成路径帮助器。 修改config/routes.rb时触发...
Vite分享、原理介绍ppt
11-15
本ppt从什么是vite、为什么选择vite作为构建工具、vite与webpack在冷启动与热更新方面的区别、vite的优势与劣势等方面详细介绍了vite的相关知识。同时本ppt含盖较为详细的vite的原理介绍，如vite是如何处理依赖预购...
vite-plugin-sfc-reload:Vite的一个非常特定的插件，它监视Drupal SFC文件的更改并在模板更新时重新加载
03-29
该插件将监视SFC文件中的更改，并将更改后的组件名称发布到sfc/compile回调中，后者随后将报告该文件的哪个部分已更新。 然后，插件确定HMR是否足够（因为HMR已经处理，它什么都不做），还是应该触发显示模板更改所...
vue3+vite框架，修改代码 CTRL+S 后，页面未发生改变
XUELINGMM的博客
05-16 2632
在vue3 + vite 项目中，对组件进行修改后保存，页面无变化；手动刷新页面，依旧无变化；Ctrl+F5刷新页面，依旧无变化；只有重新npm run dev才会生效。
xlsx，xlsx-style file-saver ,vue3+vite4+Excel导出解决方案
潜心
02-03 1973
这是我的三个依赖，用以上的三个库就可以完美输出样式excel，这里解释一下xlsx-style-hzx这是一个兼容vue3 的xlsx-style版本，开箱即用，香香。最近在迁移一个vue2项目到vue3，过程真的很曲折，我希望可以帮其他的vue3开发者节省一些时间。前端excel导出，并且希望有样式的话需要依赖三个插件。下面分享一下我的package-json 文件。
【问题】如何解决vite+vue3搭建的工程热更新失效问题
freeGameBox的博客
06-02 3790
vite是一个基于ESM的轻量级前端开发工具，它可以快速地启动项目，实现模块热更新，提高开发效率。vue3是vue的最新版本，它引入了许多新特性，如组合式API，响应式数据源等。vite和vue3可以很好地配合使用，创建现代化的前端应用。然而，在使用vite+vue3搭建工程时，有时会遇到热更新失效的问题，即修改了代码后，页面没有及时刷新，需要手动重启项目才能看到效果。那么，如何解决这个问题呢？以上就是一些可能的原因和解决方法，希望对你有所帮助。如果你还有其他的问题或建议，请在评论区留言。
vite热更新失效解决方法
Hushingiwkw的博客
06-26 1480
一、可能出现这种情况是因为vite热更新机制的问题，因为在热更新过程中，有可能会出现缓存未清除的情况，导致浏览器页面不能同时更新。添加以上代码后，打包时会生成一个新的chunk文件，文件名为everything.js，这样就禁用了浏览器缓存。当我们正常写代码的时候，保存时浏览器显示的页面，用vite应该是同时进行的，但此时需要重启项目，这样就不对了。以上配置中，我们将端口设置为了443，这样可以避免缓存未清除的情况。在浏览器中清除缓存，重新加载页面。
vite 前后端不分离
07-28
回答: 在当前的后端分离情况下，部署vite时可能会遇到一些问题。其中一个常见的问题是在部署到根路径时打开页面报404错误。这个问题可以通过Nginx的配置来解决。在Nginx的配置文件中，可以使用`try_files`指令来尝试查找对应的文件，如果找不到则返回指定的文件。另外，还需要配置`proxy_pass`指令来将请求代理到后端服务器。具体的配置可以参考以下示例： ``` upstream serve_backend { server 127.0.0.1:9001; server 127.0.0.1:9004; } server { listen 9000; server_name localhost; location / { alias html/statics/; try_files $uri $uri/ /index.html last; index index.html index.htm; proxy_pass http://serve_backend/; proxy_next_upstream error timeout http_500; proxy_http_version 1.1; proxy_set_header Connection ""; add_header backendIp $upstream_addr; add_header backendCode $upstream_status; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; } } ``` 这样配置后，Nginx会将请求代理到后端服务器，并在找不到对应文件时返回index.html文件，从而解决404错误的问题。希望对你有帮助！\[1\]\[3\] #### 引用[.reference_title] - *1* *3* [前后端分离的情况下使用Nginx部署Vite项目时静态资源被代理的问题](https://blog.csdn.net/Wrysmile0308/article/details/129623198)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue3学习笔记-知识结构-前后端分离](https://blog.csdn.net/weixin_44082271/article/details/128406387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值