跳转至

前端-Vite缓存-新路由不生效

问题现象

在 Vue Router 中新增 /fetch-records 路由后，浏览器访问该路由显示空白页，Console 报： 

[Vue Router warn]: No match found for location with path "/fetch-records"
router.getRoutes() 输出路由数为 9 条（旧值），新增路由未出现在列表中。

核心问题

  • 旧 node 进程占用端口：之前运行的 Vite dev server（PID 32344）仍在端口 3000 上运行旧代码，taskkill //F //IM node.exe 在 Git Bash 中未能成功终止。新启动的 pnpm dev 因端口占用失败（静默降级到 3001 或不报错）。
  • 浏览器模块缓存：即使 dev server 重启后提供正确代码，Chrome 对 /src/router/index.js 的 HTTP 缓存导致仍加载旧模块。
  • Vite 依赖缓存：node_modules/.vite/deps/ 目录缓存也需清理。

解决方法

  1. 精确定位端口进程：Windows 上用 Get-NetTCPConnection -LocalPort 3000 | Stop-Process -Force，而非依赖 Git Bash 的 taskkill。
  2. 清理 Vite 缓存：rm -rf web/node_modules/.vite。
  3. 浏览器禁用缓存：Chrome DevTools → Network → 勾选 "Disable cache"（必须保持 DevTools 打开）。
  4. 运行时注入路由：在 main.ts 中用 router.addRoute({...}) 添加路由，绕过模块缓存问题，作为兜底手段。
  5. 验证手段：在 main.ts 中加 console.log('[main] router ready, routes:', router.getRoutes().map(r => r.path))，直接确认运行时路由列表。

下次防错措施

  1. 重启 dev server 后必须验证端口：netstat -ano | findstr :3000，确认只有新进程在监听。
  2. 模块缓存兜底：对关键路由，在 main.ts 入口文件中用 addRoute 做二次确认。
  3. 开发时浏览器始终开 DevTools + Disable cache：避免因 HTTP 缓存浪费排查时间。
  4. 变更路由后立即验证：打开页面后先在 Console 中查看 router.getRoutes() 是否包含新路由。