vue3报错提示找不到模块“./XXX.vue”或其相应的类型声明问题

 更新时间:2023年06月05日 14:27:27   作者:惟愿长相见  
这篇文章主要介绍了vue3报错提示找不到模块“./XXX.vue”或其相应的类型声明问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue3报错提示 找不到模块“./XXX.vue”或其相应的类型声明

从网上找了好多方法比如在tsconfig文件下增加:

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

这对我来说根本没有用。

后来看到说可以在src根目录下创建一个后缀为.d.ts的文件,

写上以下代码:

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

问题解决了,不再报模块找不到的错误了

vue3 ts报错找不到相关模块问题

相应的遇到这种问题 会很苦恼 ,程序能够执行,但是对于我们一部分人来说,一直看着报错 是真的难受!

解决方法

在最外层的目录下新建一个env.d.ts文件

// <reference types="vite/client" />
// vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明
// 报错原因:typescript 只能理解 .ts 文件,无法理解 .vue文件
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;
}

保存后 ,你就会惊奇的发现,原先报错的代码,不再报错了

当然也有最简版的方法

找到对应的eslint 的扩展 将它关闭,或者是将对应的设置关闭,不过这对于团队开发的话。会有所影响~

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3 FullCalendar使用并设置dayGrid视图的最大事件数过程

    Vue3 FullCalendar使用并设置dayGrid视图的最大事件数过程

    FullCalendar dayGrid视图可通过dayMaxEvents配置限制每日事件数量,超出部分折叠显示为“+nmore”,设置为true时自动计算,数字则手动限制,点击展开查看全部事件,适用于月/周视图,支持CSS自定义折叠文本样式
    2025-08-08
  • vue 通过base64实现图片下载功能

    vue 通过base64实现图片下载功能

    这篇文章主要介绍了vue 通过base64实现图片下载功能,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • vue-cli的工程模板与构建工具详解

    vue-cli的工程模板与构建工具详解

    vue-cli提供的脚手架只是一个最基础的,也可以说是Vue团队认为的工程结构的一种最佳实践。这篇文章主要介绍了vue-cli的工程模板与构建工具 ,需要的朋友可以参考下
    2018-09-09
  • Vue封装远程下拉框组件的实现示例

    Vue封装远程下拉框组件的实现示例

    本文主要介绍了Vue封装远程下拉框组件的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue使用websocket连接优化性能方式

    vue使用websocket连接优化性能方式

    这篇文章主要介绍了vue使用websocket连接优化性能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue使用tracking实现人脸识别/人脸侦测完整代码

    vue使用tracking实现人脸识别/人脸侦测完整代码

    作为一个AI模型,人脸识别涉及到多个技术领域,下面这篇文章主要给大家介绍了关于vue使用tracking实现人脸识别/人脸侦测的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • Vue filter格式化时间戳时间成标准日期格式的方法

    Vue filter格式化时间戳时间成标准日期格式的方法

    今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue页面之间相互传值的实现方式

    vue页面之间相互传值的实现方式

    这篇文章主要介绍了vue页面之间相互传值的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2026-03-03
  • vue点击按钮实现简单页面的切换

    vue点击按钮实现简单页面的切换

    这篇文章主要为大家详细介绍了vue点击按钮实现简单页面的切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • vuecli4中如何配置打包使用相对路径

    vuecli4中如何配置打包使用相对路径

    这篇文章主要介绍了vuecli4中如何配置打包使用相对路径,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论