vue cli3 npm依赖报错,This dependency was not found: * @/views/index in ./src/router/route.js

今天遇见一个很奇怪的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,项目成功运行。

完事

你可能感兴趣的:(vue cli3 npm依赖报错,This dependency was not found: * @/views/index in ./src/router/route.js)