前端项目本地依赖一致性检查.md

predev 前端项目本地依赖一致性检查 > package.json 中声明的依赖没有安装，项目启动后出现异常报错 由于多次遇到此问题，且每次排查都要耗费不少时间，在此做一个记录，并对后续开发进行规避 ## 问题现象 git pull 拉取最新代码后，项目可以正常启动，部分页面也能正常访问，但进入某个新页面时出现错误 ``text Failed to fetch dynamically imported module ` 1. F12 打开后，Network 中对应 XXX组件.vue Status Code 为 500 2. Vite 终端显示 `text Failed to resolve import "@XXX依赖" from "src/views/XXX组件.vue" ` 原因是新代码引用了新的依赖，但本地只拉取了代码，没有同步 node_modules 执行下面的命令后问题解决 `bash npm install ` 团队项目在锁文件 package-lock.json 可靠的情况下，也可以使用 `bash npm ci ` npm ci 负责修复和重建： ` 让 node_modules 严格恢复到 package-lock.json 描述的状态 ` ## 为什么项目仍然可以启动 依赖缺失，但项目仍可以启动，是由于项目使用了路由懒加载，新依赖只在特定页面中使用 `js { path: '/big-screen', component: () => import('@/views/bigScreen/index.vue') } ` Vite 启动时不会立即加载所有懒加载页面，只有进入组件对应页面页面后才会解析 XXX组件.vue，此时才发现依赖缺失 `text 项目启动成功 → 访问普通页面正常 → 进入XXX页面 → 加载 XXX组件.vue → 新依赖无法解析 → 页面加载失败 ` 因此，项目能够启动不代表本地依赖完整 ## 添加 predev 检查 可以在 package.json 中添加 predev `json { "scripts": { "predev": "npm ls --depth=0", "dev": "vite" } } ` 执行 `bash npm run dev ` npm 会先自动执行 `bash npm run predev ` 如果 package.json 中声明的依赖没有安装，npm ls --depth=0 会报错并阻止项目继续启动 潜在问题： > 如果项目引用了新依赖，但没有把该依赖写入 package.json，npm ls` 无法通过依赖声明发现它