vite项目修改依赖不更新，清除依赖缓存

最新推荐文章于 2025-02-23 23:07:12 发布
最新推荐文章于 2025-02-23 23:07:12 发布
阅读量1.2w 收藏 2
点赞数 3
分类专栏： vue 文章标签： 前端 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhkuxia/article/details/129299389
版权
当修改依赖文件后未生效，可能是由于Vite的缓存导致。可以尝试手动删除node_modules/.vite来清除缓存，或者使用`vite--force`命令强制重新构建。Vite的缓存更新依赖于package.json、lockfile和vite.config.js的配置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

有些时候我们会直接修改依赖文件，但修改后没有更新，大多数情况下就是被缓存了

解决方法
1、手动删除node_modules/.vite

Vite 会将预构建的依赖缓存到 node_modules/.vite;然后手动删除即可

2、强制vite重新构建依赖

用 --force 命令行选项启动开发服务器
“scripts”: {
“dev”: “vite --force”
},

vite的缓存只会在以下情况发生时重新构建

  • package.json 中的 dependencies 列表
  • 包管理器的 lockfile，例如 package-lock.json, yarn.lock，或者 pnpm-lock.yaml
  • 可能在 vite.config.js 相关字段中配置过的
npm如何清空缓存并重新打包？
邓邓子的博客
05-27 6600
【代码】npm如何清空缓存并重新打包？
Vue3 - 安装依赖报错 ERESOLVE unable to resolve dependency tree | While resolving: x（vue3 install 安装项目依赖报错）
王佳斌
04-27 4359
vue3，vite，安装依赖报错，vue3装包失败，vue3执行install安装依赖包时报错，npminstall，yarninstall，如何解决vue3报错，vue3项目装不上依赖怎么办，npmERR!codeERESOLVE，npmERR!ERESOLVEunabletoresolvedependencytree，npmERR!Whileresolving，无法解决怎么办，vue3一直报错，装项目依赖报错，详细解决教程，vue3终端报错，强力解决方法，解决方法，项目没办
vite+vue3 部署后，总是需要清除缓存的问题
lx6091543wwwcctv的博客
05-16 3129
2. 使用Vite打包构建的项目，重新部署到生产。在部署期间用户一直停留在当前项目页面（长时间无操作 半个小时+），部署完成后点击页面上的路由，报错！报错内容为 Failed to fetch dynamically imported module。1.每次部署后，需要清除缓存，才能看到最新代码，给打包文件加上hash就可以解决此问题。vite.config.ts文件中加以下代码。
浏览器缓存+Vue终极指南：Vite加持，性能起飞！
最新发布
weixin_49707375的博客
02-23 792
你是否遇到过网页加载慢到怀疑人生？或是明明更新了代码，用户却还在看旧页面？浏览器缓存就是解决这些问题的幕后英雄！今天用大白话+代码示例，带你彻底搞懂它！缓存类型适用场景优点缺点强缓存长期不变的静态资源速度极快更新不及时协商缓存频繁变动的资源精准控制需要网络请求验证。
vue+vite根据版本号清空用户浏览器缓存
周金鱼啊
03-11 1191
项目生产环境发布新版本之后，用户可能会因为一些本地缓存的数据不一样而导致页面报错。这时候可以根据版本号去清空用户缓存。1、在package.json文件中有一个管理版本号属性：version。在我们每次打包部署之前修改当前版本号。
Vite更新依赖缓存失败，强制更新依赖缓存
qq407949480的博客
08-16 4760
使用vite+ts开发一段时间了，感觉并不是想象中的好用，特别是出现些稀奇古怪的问题不好解决，比如下面这个问题事情的原因是：项目是有个需求是需要拾色器功能(用的vue3-colorpicker)，但是这个拾色器打包编译的时候总会出现些问题，想把它替换掉，于是执行yarn remove vue3-colorpicker将其node-modules移除并更新了package.json，下图可作证。也有代码为例，已经删除了。
解决：使用webstorm运行vite项目有缓存问题
qq_46012115的博客
09-07 527
将Window PowerShell终端改为Microsoft Windows（cmd窗口）。
Vite如何实现秒级依赖预构建的能力
xiangzhihong8的专栏
05-11 660
前面说到了如何启动预构建的问题，现在我们来谈谈怎样通过 Vite 提供的配置项来定制预构建的过程。Vite 将预构建相关的配置项都集中在optimizeDeps属性上，我们来一一拆解这些子配置项背后的含义和应用场景。Vite 提供了esbuildOptions 参数来让我们自定义 Esbuild 本身的配置，常用的方式是加入一些 Esbuild 插件，配置如下。plugins: [// 加入 Esbuild 插件。
vite项目启动不了
07-29
2. 清除缓存并重新安装依赖：在项目根目录下，运行 `npm cache clean --force` 命令来清除npm缓存。然后删除 `node_modules` 文件夹，并重新运行 `npm install` 命令来重新安装依赖。 3. 检查启动命令和配置：确保...
Nuxt3 - 解决报错 Cannot find module ‘vite‘ | Require stack: xxx，详细解决 nuxt3+vite 运行启动项目出现报错提示找不到模块“vite”！
王佳斌
07-26 4489
nuxt3，vite，启动报错，Cannotfindmodule'vite'，nuxt3运行报错，启动不了，提示报错，出错，nuxt.config.ts，nuxt3.x+vite项目无法运行，Requirestack，rundev，打包，构建，详细解决教程，NUXT3Cannotfindmodule'vite'，缺少vite包怎么办，nuxt3执行install安装依赖后运行项目报错，安装依赖后运行不起来了，nuxt启动项目出错，依旧无法解决，Nuxt3运行提示缺vite模块如何安装，cn
Nuxt3 - 解决报错 Cannot find module ‘windicss/helpers‘ | Require stack: xxx，nuxt3+vite运行项目出现报错提示找不到模块“wi
王佳斌
07-26 3524
nuxt3，vite，启动报错，Cannotfindmodule'windicss/helpers'，nuxt3运行报错，nuxt3安装windicss/helpers，启动不了，提示报错，出错，nuxt3执行install安装依赖后运行项目报错，安装依赖后运行不起来了，nuxt.config.ts，nuxt3.x+vite项目无法运行，Requirestack，rundev，打包，构建，详细解决教程，NUXT3Cannotfindmodule'windicss/helpers'，缺少vi
vite打包解决前端发版后浏览器缓存问题
qq_51417677的博客
02-28 3980
通过利用时间戳解决浏览器缓存问题，确保每次发布新版本时浏览器都能加载最新的代码。合理设置输出文件的文件名，同时保留第三方库的稳定性。
vue项目快速删除node_modules并清理缓存
weixin_40918145的博客
08-18 1755
删除node_modules。
vue项目部署，自动清除缓存配置
weixin_45559449的博客
03-20 3917
通过在head标签中添加meta，当浏览器访问index.html时，会向服务器重新请求静态资源。该方法了解即可，不推荐使用，会导致用户每次访问程序都需要重新请求服务器，所有静态资源都无法使用缓存，浪费流量，网络压力大。项目打包时给js、css文件加上时间戳，保证输出的文件名不会相同，通过 vue.config.js 进行配置。chunkFilename： 指未列在 entry 中，却又需要被打包出来的文件的名称（懒加载的文件）filename： 指列在 entry（入口） 中，打包后输出的文件的名称。
vue项目打包部署后 浏览器自动清除缓存问题（解决方法）
weixin_45074627的博客
09-26 422
vite 配置 打包文件加 时间戳。
vite初识
jsPao的博客
12-05 302
Vite一开始会去加载index.html文件，然后通过script标签加载main.js，这其实和Vite的编译特性有关，传统的例如webpack的构建打包方式，启动必须优先抓取并构建你的整个应用，然后才能提供服务。
Vue.js 清除页面缓存的方法
2301_79326930的博客
09-26 9770
一种简单的方法是通过修改页面的 URL 来清除缓存。这样，每次 URL 发生变化时，浏览器会重新请求页面，从而达到清除缓存的效果。本文介绍了几种常见的方法来实现这一目标，包括通过修改 URL、使用 Vue Router 导航守卫以及使用 Vue 的。在 Vue.js 开发中，有时候我们需要在页面更新时清除缓存，以确保用户能够看到最新的数据或者 UI 变化。方法，该方法会将当前页面的 URL 修改为包含当前时间戳的新 URL。根据你的项目需求和具体场景，选择适合的方法来清除页面缓存，并提供更好的用户体验。
vue3+js+vite学习之页面动态缓存
u014015203的博客
11-13 1128
2、使用router-view时，如果遇到多层嵌套的问题，只需要在最里层的router-view中加上keep-alive缓存即可。在需要进行缓存的页面中，meta参数中增加keepAlive配置项，需要缓存的配置成true，不需要缓存的配置成false或者不设置都行。3、在router-view中使用keep-alive，include是缓存的页面name数组，读取pinia中的值。2、将缓存的页面name数组存储在pinia中，根据打开的标签页列表动态变化。1、首选在路由列表中进行是否需要缓存配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

苦夏木禾

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

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

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

打赏作者

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

抵扣说明：

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

余额充值