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
}