今天遇见一个很奇怪的bug,项目突然跑不起来了,看报错信息明显是依赖问题,npm对于代码里的依赖找不到了,所以编译代码的时候报错了,可是我明明啥也没改。找到最后发现其实是vscode和git的坑
从以下流程开始找bug
检查依赖文件
检查依赖是否被安装,以及依赖是否可访问(node_modules里的依赖被误删,缺少文件访问权限,第三方包升级了导致包文件结构改变找不到原来的文件等),对于npm安装的第三方包,检查package.json里dependencies或devDependencies里,是否有依赖声明,并且检查node_modules里的依赖文件是否完整,如果有问题,执行npm install安装一次依赖。看报错信息引用的是我本地的模块,所以排除是node_modules出了问题。
检查自己写的代码
因为这里使用的是本地模块,检查模块引用路径是否正确,此时源码里引入部分为:
{
path: '/',
name: 'Index',
component: () => import('@/views/index'),
meta: {
title: '首页'
}
}
没问题,通过import('@/views/index')
来访问,因为设置了jsconfig.json,指定了路径别名@映射到项目的src目录下。
检查本地配置
检查了一下项目目录下的jsconfig.json,也没问题。tips:设置了jsconfig.json之后,支持代码里通过@来映射src引入文件,不需要通过../../这种相对路径使用。vscode支持在使用@路径引入的时候自动联想补全src路径信息
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
从文件入手顺藤摸瓜
看代码里,引入文件为@/views/index
,检查src/views/index.vue
,文件正常,可以打开,内容也没乱码。这我就抓狂了,几个意思啊我又没事删你又没改你名字,你咋就是找不到文件呢!
直接打开终端,cd到项目目录,ll -a
命令显示一下,从权限来看,也是有rw读写权限的(windows里一般没这个问题),文件也正常没有被软链接劫持。
转机出现,就当我一脸问号的时候,瞥见终端列出的文件列表,index.vue变成了Index.vue。好家伙,终于找到了问题。因为之前有个版本是用的Index.vue,后面改名为了index.vue,在git里默认未开启大小写区分,而且在vscode文件列表里也是正常显示的,直到我点了一下刷新按钮。。。
问题解决
文件名问题,在git和vscode的源代码管理里,对这个文件进行了变更,然后又进行了恢复,git直接给我改成了之前的名字,而vscode也没实时刷新,问题解决,直接Index.vue改回index.vue,项目成功运行。
完事