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。这样的错误，同时项目不能运行(如果其他地方使用别名引入的话，如下图）。今天就解决以为这个问题。

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

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

三、TypeScript别名解析目录配置

提示:在ts别名解析前，webpack别名是必须要配置的。
首先在tsconfig.json中添加baseUrl和paths字段。两个字段具体的作用请参考:ts中文官网.
下面是我项目中的配置

配置完毕后，在vue或者ts中就可以使用别名了。

最后对于一些博客问题的纠正。
有些博客中提到项目必须放到第一个，这种做法在我个人项目不是必须的。

我的项目