vue3 引入组件报错Cannot find module './components/Person' or its corresponding type declarations.
检查了路径正确,文件存在,Perosn.vue
文件内部没有任何报错。
所以为啥找不到文件啊?
这个报错让我很迷惑。百度了一堆解决方案:
- 卸载或禁用
Vetur
插件。
这个插件是vue 2.x 的插件。
卸载这个插件后,去掉了vs code弹出的提示:In the vue 3 project, The Vue Language Features (Volar) is new recommended ...
如果在vs code的配置文件中有Vetur
的相关配置,也要注释掉。
vue3在引入组件时报has no default export
,意思就是没有进行默认导出。
在vs code 的配置文件中加一个配置:"vetur.validation.script": false
这个配置项是关于vs code的Vetur
插件的设置,用于控制是否启用Vue文件中JavaScript代码的验证。
当设置 "vetur.validation.script": false
时,关闭Vetur
插件对Vue文件中的JavaScript/TypeScript代码进行语法检查。
-
看到有同学提供如下图所示的解决方案,我照着做了,没什么用。我就把这个插件启用了。
-
安装TypeScript Vue Plugin (Volar)插件
这个插件已经弃用,并且推荐安装插件Vue-Official
。
我已经安装了插件Vue-Official
。这个解决方案也无效。
-
我在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: ComponentOptions
export default componentOptions
}
没起作用!!!
迫于无奈,我去翻了vite官网:
最终解决问题的解决方案:
在项目根目录下创建了shims.d.ts
:
declare module '*.vue' {
import { ComponentOptions } from 'vue'
const componentOptions: ComponentOptions
export 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
文件夹,重新下载依赖。如果不能解决问题,再试试上面的办法。