vue3+ts 报错解决:找不到模块或其相应的类型声明。(Vue 3 can not find module)

文章讲述了在Vue项目中遇到组件ts导入错误的解决方案,包括检查文件路径、名称,配置TypeScript和Vue构建工具,确认文件导出,以及针对Volar插件的takeover模式设置等问题的排查方法。
摘要由CSDN通过智能技术生成

当我们引入该组件的时候 提示找不到这个组件 ts报错

1.检查文件路径:确保 文件的路径是正确的,并且确实存在于 components 目录下。

2.检查文件名:确保在导入时使用的文件名与实际文件名大小写完全匹配。

3.检查 TypeScript 配置:如果项目中有 tsconfig.json 或 jsconfig.json 文件,确保该文件包含了正确的路径别名或根路径。

4.检查 Vue 配置:如果使用了如 webpack 或 Vite 这样的构建工具,确保相关的配置能够正确处理 .vue 文件。

5.确认文件导出:如果 是一个模块文件,确保它有正确的默认导出或命名导出。

6.重启编译器服务:有时候,重启 IDE 或编译器服务可以解决缓存导致的问题。

7.如果以上步骤都无法解决问题,可能需要检查项目的依赖是否正确安装,或者查看具体的编译错误信息,以便进一步诊断问题。
8. 如果还出现如图所出的问题
在这里插入图片描述

第一种解决办法 在vite-env.d.ts(env.d.ts) 里面添加如下代码

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
    const component: DefineComponent<{}, {}, any>
    export default component
}

如图:
在这里插入图片描述

第二种

  1. 这个时候我们应该这样

首先

原因:
1、volar 插件没开takeover模式
去看volar插件介绍,开takeover模式
2、volar未选择tyscript最新版本
解决:
1、在当前项目的工作空间下,用 Ctrl + Shift + P (macOS:Cmd + Shift + P) 唤起命令面板。
2、输入 built,然后选择“Extensions:Show Built-in Extensions”。
3、在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。
4、点击“TypeScript and JavaScript Language Features”右下角的小齿轮,然后选择“Disable (Workspace)”。
5、重新加载工作空间。Takeover 模式将会在你打开一个 Vue 或者 TS 文件时自动启用
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

  • 15
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
如果在使用vite时出现了不到模块"@vitejs/plugin-vue"或其相应类型声明的问题,在解决这个问题之前,我们需要确保已经安装了相关的依赖包。根据引用中的信息,我们可以执行以下步骤来解决这个问题: 1. 打开终端,并进入你的项目目录。 2. 确保你的项目中已经安装了vite和"@vitejs/plugin-vue"依赖包。如果没有安装,可以使用以下命令进行安装: ``` npm install vite @vitejs/plugin-vue -D ``` 3. 如果在安装依赖时出现了报错,可能是因为vite插件版本与vite不一致导致的。你可以尝试使用以下命令进行安装: ``` npm install -D vite@^3 ``` 4. 如果以上步骤都没有解决问题,你可以尝试手动放置相关文件。根据引用中的信息,你可以下载并解压"@vitejs/plugin-vue"依赖包,并将解压后的文件夹放在你的项目的node_modules文件夹下。 通过以上步骤,你应该能够解决不到模块"@vitejs/plugin-vue"或其相应类型声明的问题。记得在解决问题之后重新运行你的项目,以确保修改生效。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vite 安装配置ts遇到的常见问题](https://blog.csdn.net/qq_46258819/article/details/128914075)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [手动解决Cannot find module '@sentry/webpack-plugin'等问题](https://download.csdn.net/download/jlq_diligence/28725246)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vite + ts 不到模块@/xxxx 或其相应类型声明](https://blog.csdn.net/qweasdassd/article/details/129421402)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值