vue3+ts+vite2项目,关于找不到声明文件的处理
背景
趁着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
文件没有生效,哈哈哈,这一刻是不是想打我呢
转载自:https://juejin.cn/post/6968364365237993479