Vite项目配置resolve.alias后提示『找不到模块』的解决办法

一、现象与原因

vite.config.ts可以配置resolve.alias别名，这样在项目中import时就不用写一长串相对路径了，但有时会遇到编辑器提示『找不到模块』，虽然不影响编译与运行，但看着很碍眼。
原因就是缺少了相应的配置，导致VSCode识别不了模块。

二、针对.vue文件

在项目的src目录下新建vite-env.d.ts，写入以下内容：

/// 

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
1
2
3
4
5
6
7

三、针对.ts文件

在项目根目录下的tsconfig.json文件中加入baseUrl和path两个选项，具体的值就根据你的实际情况修改：

{
  "compilerOptions": {
  	//...
  	"baseUrl": "src",
    "paths": {
      "@hooks/*": ["hooks/*"]
    }
  }
  //...
}
1
2
3
4
5
6
7
8
9
10