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 ...
    如果在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代码进行语法检查。

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

### 解决方案 在 TypeScriptVue 的组合开发环境中,当尝试通过 `import` 导入 `.vue` 文件时,可能会遇到类似于 “Vue: Could not find a declaration file for module &#39;./App.vue&#39;. implicitly has an any type.者 “不到模块./App.vue相应类型声明。” 这样的错误。这是因为 TypeScript 默认无法识别 `.vue` 单文件组件作为合法的模块。 以下是解决问题的方法: #### 方法一:扩展模块声明 可以通过定义自定义模块声明来让 TypeScript 认识 `.vue` 文件为有效模块。具体操作如下: 1. **创建环境声明文件** 在项目的 `src` 目录下新建一个名为 `env.d.ts` `shims-vue.d.ts` 的文件(名称可以自由选择),并添加以下内容: ```typescript declare module &#39;*.vue&#39; { import type { DefineComponent } from &#39;vue&#39;; const component: DefineComponent<{}, {}, any>; export default component; } ``` 上述代码的作用是告诉 TypeScript 编译器,所有的 `.vue` 文件都可以被当作模块处理,并且它们默认导出的内容是一个由 `DefineComponent` 定义的组件对象[^2]。 2. **禁用 ESLint 报警(可选)** 如果使用了 ESLint 并启用了某些严格的规则,则可能需要忽略特定规则警告。可以在上述代码前加入以下注释: ```javascript // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types ``` 3. **验证配置文件路径** 确保该声明文件位于 TypeScript 能够扫描到的位置。通常情况下,默认会自动加载 `src` 下的所有 `.d.ts` 声明文件。如果未生效,请检查 `tsconfig.json` 中是否有如下设置: ```json { "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] } ``` --- #### 方法二:修改现有声明文件 部分项目已经存在类似的全局声明文件(如 `vite-env.d.ts`)。可以直接在此类文件中追加对 `.vue` 模块的支持而无需新增额外文件。例如: ```typescript // src/vite-env.d.ts declare module "*.vue" { import type { DefineComponent } from "vue"; const vueComponent: DefineComponent<{}, {}, any>; export default vueComponent; } ``` 此方法适用于已有声明文件的情况,只需补充相关内容即可完成修复[^3]。 --- #### 方法三:安装依赖插件 对于基于 Vite 构建工具链的项目来说,还可以考虑借助社区维护好的插件简化流程。比如安装 [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue) 插件后,它能够帮助自动化解决许多常见兼容性问题。 执行命令安装所需包: ```bash npm install --save-dev @vitejs/plugin-vue ``` 随后更新 `vite.config.ts` 配置文件以启用插件支持: ```typescript import { defineConfig } from &#39;vite&#39; import vuePlugin from &#39;@vitejs/plugin-vue&#39; export default defineConfig({ plugins: [ vuePlugin() ] }) ``` 这样做的好处是可以减少手动调整的工作量,同时获得更稳定的构建体验[^4]。 --- ### 总结 以上三种方式均可有效应对因缺少适当类型声明而导致的导入失败现象。推荐优先采用 **方法一** 创建独立的声明文件者利用现有的声明文件扩充功能;而对于现代化框架使用者而言,也可以探索官方推荐的最佳实践——即引入专门设计用于增强集成能力的相关插件。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值