vue3+ts报错:找不到模块“@/views/score.vue”或其相应的类型声明。

搭建 vue3+ts 项目的时候遇到的一个问题:找不到模块“@/views/score.vue”或其相应的类型声明

在这里插入图片描述

虽然说爆红是不影响运行的,但这谁看这都难受啊!

原因:因为我们使用的是 ts 的语法,项目只识别 ts 后缀的文件,无法识别 .vue 文件,所以引入的时候会报错,需要申明一下

参考连接:https://cn.vuejs.org/guide/typescript/overview.html#using-vue-with-typescript
在这里插入图片描述

解决办法:

  1. 利用插件 TypeScript Vue Plugin 解决

在这里插入图片描述

TIP:

  1. Volar 是官方的 VSCode 扩展,提供了 Vue 单文件组件中的 TypeScript 支持
  2. Volar 取代了我们之前为 Vue 2 提供的官方 VSCode 扩展 Vetur。如果你之前已经安装了 Vetur,请确保在 Vue 3 的项目中禁用它。
  1. 在src目录下创建env.d.ts文件,加入以下代码 目的:在导入以 .vue 结尾的模块时,应该使用下面的定义。
	declare module "*.vue" {
	  import type { DefineComponent } from "vue";
	  const component: ComponentOptions | ComponentOptions["setup"];
	  export default component;
	}

解决!