找不到模块“@/views/redirect/index.vue”或其相应的类型声明。ts(2307)

场景

vue component: () => import("@/views/redirect/index.vue"),

原因

Ts默认不识别.vue文件。 解决办法：添加类型声明文件，创建一个后缀名为.d.ts的文件，例如env.d.ts，并配置如下内容即可： vue declare module "*.vue" { import { DefineComponent } from "vue"; // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any>; export default component; }

注意

env.d.ts文件具体放置在哪里会生效和配置有关。

1. 如果项目结构中包含tsconfig.app.json和tsconfig.node.json 文件， 则打开tsconfig.app.json 文件会发现有一个include配置项，默认内容如下： json "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] 可以看到include配置项对应的数组中有"src/**/*.ts"配置，它将会扫描src目录及其所有子目录下以.ts结尾的文件，所以会发现把env.d.ts文件放置在src目录下会生效，而放置在项目根目录下不会生效。是因为只要添加了include配置项，哪怕对应的是空数组也以配置为准，如果想要放置在项目根目录下也生效，有两种做法。

做法一：把include配置项去掉（记住是去掉配置项，而不是去掉include配置项里的配置值src/**/*.ts），去掉后文件放在项目根目录下任意位置都能匹配到（前提文件不能被exclude选项排除）。

做法二：在include配置项数组中再添加根目录配置"*.d.ts"即可，如下所示。 json "include": ["src/**/*.ts","*.d.ts", "src/**/*.tsx", "src/**/*.vue"] } 。

2. 如果项目结构中不包含tsconfig.app.json和tsconfig.node.json 文件，则看tsconfig.json有没有配置项include，若有则以include配置为准，若没有则放置在项目根目录下任意位置都能匹配到（前提文件不能被exclude选项排除）