main.ts中引入App.vue报错，提示“Cannot find module ‘./App.vue’ or its corresponding type

原因

代码编辑器：vscode ，使用vue3，所以安装了 Volar 插件，可以使 vue 代码高亮显示，不同颜色区分代码块，以及语法错误提示等

提示：如果使用的是vue2，则使用 Vetur 插件；使用 vue3 的话 ，要禁用 Vetur 插件，然后用 Volar 插件。两个插件不要同时使用，会冲突。 报错描述： 安装vite框架（Vue3）后，项目“main.ts” 文件中 import App from ‘./App.vue’ 部分有红色报错提示，其他文件有些import引入文件也报错。 查看项目“main.ts” 文件中 “import App from ‘./App.vue’” 部分报错原因，提示报错 “Cannot find module ‘./App.vue’ or its corresponding type declaration”

解决办法

 在该文件下添加如下代码即可

/// <reference types="vite/client" />
// 这行代码是一个三斜杠指令，它是 TypeScript 中的一种特殊语法，
// 用于引入或声明其他模块的类型声明文件。这个指令告诉 TypeScript 编译器，在编译过程中，需要参考 vite/client 模块的类型声明文件。

declare module "*.vue" {
    // 这里定义了一个名为 *.vue 的模块声明，表示所有以.vue 结尾的文件都属于这个模块。
    // 接下来定义了这个模块的类型，引入了 DefineComponent 类型，这是 Vue 框架用于定义组件的类型。
    import { DefineComponent } from "vue"
    // 声明了一个名为 component 的常量，其类型为 DefineComponent<{}, {}, any>。
    // 这表示这个组件可以接受任何属性（{}），不包含方法（{}），并且可以渲染任何类型的模板。 
    const component: DefineComponent<{}, {}, any>
    // 使用 export default 将 component 常量导出。
    // 这意味着任何导入 *.vue 文件的模块，都将获得这个组件作为其默认导出。
    // 这样，其他模块就可以在自己的文件中使用这个组件，而不需要知道其具体实现细节。
    export default component
}