背景

趁着vue3的热浪，我尝试着用vue3+ts+vite2搭一下项目框架，然而，在搭建的过程中，导入.vue/.ts/.js等文件，总是会报错，说找不到相关模块或找不到声明文件。一次又一次copy报错信息，网上搜索，ts官网翻看，或者技术网站翻看翻看，都没有一个很好的解决方案的归纳，那么我就来归哪归纳一下啦

先来欣赏一下，这些阴魂不散报错的截图

虽然报错，但并不影响整个项目的运行，可作为一个严谨的程序媛，当然看不惯这些红色的波浪在自己的项目里穿街过巷啦，所以我坚持找到解决方案，终于让我找到解决办法了。

敲黑板，进入主题啦

1、缺少相关声明文件

以上截图的报错，最大的关键在于没有相关的声明文件，在ts项目里面，.ts文件是识别不了.vue文件，.vue文件也识别不了.ts文件，这时候就需要.d.ts声明文件来填好这个坑啦。

先来看图一：找不到模块“./App.vue”或其相应的类型声明

网上最容易搜到解决方案就是图一的问题，大体有两个方案：

方案一：

declare module '*.vue' {
  import { defineComponent } from 'vue'
  const Component: ReturnType<typeof defineComponent>
  export default Component
}

方案二：

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

一顿骚操作下来，只有方案一是适用于vue3+ts+vite2搭配的项目。对于方案二，虽然导入.vue文件的路径不报错，但导入的组件在使用时会报类型声明有问题的错，如图： 问题就在于，方案二导出的Vue，并没有做相关的类型声明，从而匹配不上createApp这个函数声明时定义的参数类型，方案一就做了相关类型声明。 据小道消息：方案二适用于vue2项目，具体是否适用，我并没有去求证。

剩下几张图

'An import path cannot end with a '.ts' extension'

'Cannot find module 'http/api/index' or its corresponding type declarations'

找不到模块“http/jsrsasign.js”或其相应的类型声明

这几个文件都是自定义的.ts/.js文件，所以就需要编写好相关的.d.ts声明文件

declare module 'http/index.ts';
declare module 'router/index.ts';
declare module 'http/api/index.ts';

当然你们不想逐个.ts文件声明的话，可以直接来句全局ts的声明，如下：

declare module '*.ts'

2、相关声明文件文件引用路径后缀统一：

声明文件中引用的文件是否带后缀，直接关系到在.vue文件引用.ts文件时是否带上后缀的！！！

1、声明不带后缀，引用带后缀：'An import path cannot end with a '.ts' extension'

// shim.d.ts
declare module 'http/index';

// .vue文件
import axios from 'http/index.ts'

2、声明带后缀，引用不带后缀：'Cannot find module 'http/api/index' or its corresponding type declarations'

// shim.d.ts
declare module 'http/index.ts';

// .vue文件
import axios from 'http/index'

3、项目配置文件一定要做好相关处理

ts的声明文件写好了，也不是万事大吉的，我就是踩了这么一个坑：声明文件确认无误了，报错还是阴魂不散。在我不停刨坑后发现，问题就出在，.d.ts文件放置的目录与tsconfig.json文件指定的includes匹配列表路径不一致，导致.d.ts文件没有生效，哈哈哈，这一刻是不是想打我呢