Cannot find module ‘@xxxx‘ or its corresponding type declarations.Vetur(2307)

一、问题表述

当我们想在vue页面通过import requestfrom '@client/utils/request’引入模块时,Vetur总是会提示Cannot find module ‘@xxxx’ or its corresponding type declarations。这样的错误,同时项目不能运行(如果其他地方使用别名引入的话,如下图)。今天就解决以为这个问题。
Cannot find module ‘@xxxx‘ or its corresponding type declarations.Vetur(2307)

二、项目中为什么使用别名进行模块导入?

如果使用相对导入(import myComponent from ‘…/…/…/components/myComponent’ )。当项目开发到一定规模时,不便于维护。
比如:突然有一天对api目录进行目录调整,如果使用相对导入,那么所有导入都会失效,需要重新更改路径进行导入。如果使用别名导入,可能只需要改变别名的路径即可完成api目录调整。

三、TypeScript别名解析目录配置

提示:在ts别名解析前,webpack别名是必须要配置的。
首先在tsconfig.json中添加baseUrl和paths字段。两个字段具体的作用请参考:ts中文官网.
下面是我项目中的配置
Cannot find module ‘@xxxx‘ or its corresponding type declarations.Vetur(2307)
配置完毕后,在vue或者ts中就可以使用别名了。
Cannot find module ‘@xxxx‘ or its corresponding type declarations.Vetur(2307)
Cannot find module ‘@xxxx‘ or its corresponding type declarations.Vetur(2307)

最后对于一些博客问题的纠正。
有些博客中提到项目必须放到第一个,这种做法在我个人项目不是必须的。
Cannot find module ‘@xxxx‘ or its corresponding type declarations.Vetur(2307)
我的项目
Cannot find module ‘@xxxx‘ or its corresponding type declarations.Vetur(2307)

上一篇:Problem B 1263 矩形面积的并


下一篇:Problem J: IP地址