vue3vite项目启动报错 GET http://localhost:5173/node_modules/.vite/deps/crypto-js.js?v5daf9760 net::ERR_CACHE_READ_FAILURE 200 (OK) arrayDeduplicateUtils.ts:1 GET http://localhost:5173/node_modules/.vite/deps/lodash-es.js?v5daf9760 net::ERR_CACHE_READ_FAILURE 200 (OK) excelUtils.ts:4 GET http://localhost:5173/node_modules/.vite/deps/xlsx.js?v5daf9760 net::ERR_CACHE_READ_FAILURE 200 (OK)Vue3Vite 项目启动时出现ERR_CACHE_READ_FAILURE错误通常是因为浏览器缓存或Vite的依赖预构建缓存位于node_modules/.vite出现了读取问题。解决此问题的核心思路是清除并重建这些缓存。你可以根据遇到的具体情况从下表中选择最适合的解决方案开始尝试问题场景推荐方案核心操作解决速度首次遇到或不确定原因方案一清除缓存并强制重建删除缓存目录或使用--force参数启动快清理后错误依旧或频繁复现方案二优化Vite依赖预构建配置在vite.config.js中显式包含问题依赖一劳永逸浏览器可能存在顽固缓存方案三清除浏览器缓存清除浏览器历史记录与缓存文件辅助解决 解决方案详解方案一清除缓存并强制重建通用首选这个方法直接处理出错的缓存文件效果最直接。先完全关闭你的开发服务器然后任选其一方法A推荐使用--force命令行参数启动项目。这会让Vite强制重建依赖缓存。在你的package.json的scripts中将启动命令修改如下jsonscripts: { dev: vite --force, // ... }然后运行npm run dev或yarn dev。根据Vite官方文档--force标志的作用就是强制优化器忽略缓存并重新构建。方法B手动删除Vite的缓存目录。在你的项目根目录下执行bash# 在Windows系统的命令行如PowerShell中 rmdir /s /q node_modules\.vite # 在macOS/Linux系统的终端中 rm -rf node_modules/.vite删除后重新运行npm run dev无需--force参数。这和官方建议的解决方法一致。方案二优化Vite依赖预构建配置治本之策如果问题反复出现特别是对于crypto-js、lodash-es这类模块可能是因为Vite没有自动将它们纳入预构建流程。此时需要在vite.config.js中进行显式配置。打开项目根目录下的vite.config.js文件。在配置中添加optimizeDeps.include选项将报错的依赖包加入javascriptimport { defineConfig } from vite import vue from vitejs/plugin-vue // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], optimizeDeps: { // 显式指定需要预构建的依赖 include: [crypto-js, lodash-es, xlsx] } })保存配置先执行方案一中的任一方法清除旧缓存再重新启动项目。这个方法能确保这些依赖在项目启动时就被正确处理并缓存可以避免后续的加载失败。方案三清除浏览器缓存辅助方案如果错误发生在浏览器控制台且上述方法无效可以尝试清除浏览器缓存打开Chrome开发者工具F12进入Network网络面板。勾选Disable cache停用缓存选项。彻底关闭浏览器再重新打开访问项目。 如何选择与预防选择建议建议首先尝试方案一方法A它最简单快捷。如果无效或问题很快复发再采用方案二进行根本性解决。预防措施在项目开发中如果安装、更新或删除了依赖包Vite可能因缓存未及时更新而报错。养成在此类操作后重启开发服务器的习惯能有效避免很多缓存问题。如果你已经尝试了上述方法但问题依旧可以告诉我以下信息以便进一步分析你的package.json中crypto-js、lodash-es、xlsx的具体版本号是什么在尝试了哪个具体步骤例如手动删除.vite目录并重启后错误仍然出现这是一个非常好的观察也是定位此问题的关键线索。其他浏览器正常恰恰证明问题出在你当前这个浏览器很可能是 Chrome的缓存机制上而不是你的项目代码或Vite服务器本身。 核心原因浏览器缓存隔离每个浏览器都拥有自己完全独立的缓存系统。简单来说你可以把它们理解为拥有不同“私人笔记”的工人。Vite 服务器在工作它正确地将预构建好的依赖文件如crypto-js.js发给了浏览器。浏览器A如Chrome它在第一次接收文件时可能由于网络波动、插件干扰、进程异常等原因将文件错误地或损坏地存入了自己的“私人笔记”缓存中。下次请求时它没有去问Vite服务器要新文件而是直接读取了自己那份损坏的缓存笔记于是就报出了ERR_CACHE_READ_FAILURE错误。浏览器B如Edge/Firefox它是一个“新工人”没有任何错误的笔记。第一次请求时它从Vite服务器拿到了完整的、正确的文件所以工作正常。 为什么 Chrome 更易出现此问题虽然所有浏览器都可能发生但在开发环境下Chrome 系列浏览器包括 Edge 的 Chromium 内核更为常见原因如下特性对缓存的影响导致问题的场景缓存策略激进对静态资源如JS缓存非常积极以求最佳性能。在Vite热更新频繁时容易缓存到中间状态或不完整的文件。进程模型复杂多进程架构缓存读写可能在不同进程间同步不及时。标签页崩溃、强制刷新时易产生缓存不一致。开发者工具影响禁用缓存、强制刷新等操作有时会产生副作用。频繁切换Disable cache状态可能意外导致缓存元数据错乱。 如何证明并立即解决你可以通过一个简单的实验来验证以上理论并同时解决问题关键验证在无痕/隐私窗口中打开你的项目地址http://localhost:5173。预期结果99%的概率会运行正常。因为无痕模式使用一个全新的、临时的缓存里面没有之前损坏的缓存文件。如果无痕模式也正常就100%确证是原浏览器缓存的问题。彻底解决按照以下步骤清除当前浏览器的缓存打开Chrome的设置隐私和安全清除浏览数据。时间范围选择“时间不限”。务必勾选“缓存的图片和文件”其他选项可酌情选择。点击“清除数据”然后完全关闭并重新打开浏览器再访问项目。 总结与最佳实践所以ERR_CACHE_READ_FAILURE的本质是Vite服务器正常但某个浏览器的本地缓存文件损坏或读取失败。开发期最佳实践当遇到此类莫名其妙的加载失败、白屏或样式错乱时第一个排查步骤就是尝试“无痕模式”或“换个浏览器”这能快速帮你判断是前端问题还是后端服务问题。在Chrome开发者工具的Network网络面板中勾选“Disable cache停用缓存”可以避免绝大多数由缓存引发的问题非常适合开发阶段使用。如果你已经尝试了清除浏览器缓存项目在原来报错的浏览器里也正常了那么问题就圆满解决了。过一会自行恢复正常了