vue3 报错解决：找不到模块或其相应的类型声明。

本文主要是介绍vue3 报错解决：找不到模块或其相应的类型声明。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue3 引入组件报错Cannot find module './components/Person' or its corresponding type declarations.

检查了路径正确，文件存在，Perosn.vue文件内部没有任何报错。
所以为啥找不到文件啊？

这个报错让我很迷惑。百度了一堆解决方案：

1. 卸载或禁用 vetur 插件。
   这个插件是vue 2.x 的插件。
   卸载这个插件后，去掉了vs code弹出的提示：In the vue 3 project, The Vue Language Features (Volar) is new recommended ...

2. 看到有同学提供如下图所示的解决方案，我照着做了，没什么用。我就把这个插件启用了。
   

3. 安装TypeScript Vue Plugin (Volar)插件
   这个插件已经弃用，并且推荐安装插件 Vue-Official。
   我已经安装了插件Vue-Official。这个解决方案也无效。
   

4. 我在vs code 设置里将ts校验去掉，就不报红了
   
   在终端执行命令：npm run dev
   事实证明，不报红 绝对不等于 错误不存在！
   在浏览器中显示错误：[plugin:vite:import-analysis] Failed to resolve import "./components/Person"

善用搜索工具，看到这了这两篇：
[plugin:vite:import-analysis] 无法解析导入 #2213
插件：vite：import-analysis - 分析导入时失败，因为内容包含无效的JS语法。- Vue 3

看完并没有找到解决方案…

最终，我查看了client.d.ts文件，在文件中没有声明.vue文件。
在env.d.ts文件了加了.vue声明：

declare module '*.vue' {import { ComponentOptions } from 'vue'const componentOptions: ComponentOptionsexport default componentOptions
}

没起作用！！！
迫于无奈，我去翻了vite官网：

最终解决问题的解决方案：
在项目根目录下创建了shims.d.ts:

declare module '*.vue' {import { ComponentOptions } from 'vue'const componentOptions: ComponentOptionsexport default componentOptions
}

在env.d.ts中使用shims.d.ts:

/// <reference types="./shims.d.ts" />
/// <reference types="vite/client" />

问题虽然解决了，但我更加迷茫了。
因为创建vue3项目的时候，在App.vue里，官方给的例子就是通过import引入的vue文件：

一个全新的vue项目，运行npm run dev可以成功运行，没有任何报错！

这也是我在遇到报错，打从一开始就不认为是ts无法理解.vue的原因。

当我重新创建一个vue3新项目，想从头复盘并记录这个错误时，在新项目的App.vue中引用Person.vue，没有任何报错！

因此，建议各位同学在遇到这个问题的时候，首选解决方案是删除node_module文件夹，重新下载依赖。如果不能解决问题，再试试上面的办法。

这篇关于vue3 报错解决：找不到模块或其相应的类型声明。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---