vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决

 更新时间:2022年09月13日 10:09:13   作者:0110_1024  
这篇文章主要介绍了vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

ts无法识别引入的vue文件,提示找不到xxx.vue模块

在vue + ts项目中,在.ts中引入.vue文件,会提示打不到module,但是编译可能成功,运行也不报错

在src根目录下,新建一个sfc.d.ts文件这个里面的

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

在shims-vue.d.ts文件中官方文档有一个地方是说写到这里来着,所以shims-vue.d.ts中的这段要删掉,把他们写到

sfc.d.ts中,问题就可以解决了 

vite+ts引入 .vue或 .ts文件时提示找不到模块

一、先说第一个问题

.vue 文件引入时,提示 找不到模块“xxx.vue”或其相应的类型声明

方式一:在你的src目录下创建一个 .d.ts结尾的文件 例如:env.d.ts 里面内容如下

declare module "*.vue" {
  import { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

方式二:其实和方式一的方法类似,就是在src下创建一个创建一个文件夹,名字自定义,然后创建一个 .d.ts文件,内容和方式一 一样。注:需要注意的是,如果创建文件夹,需要在你的tsconfig.json文件中声明一下,结构如下:我声明的文件夹名称为:typings 

二、引入自定义的ts文件时

提示 找不到模块“xxx.ts”或其相应的类型声明

我在使用时出现这个问题的原因是因为配置的快捷路径导致的

         

在vue中使用快捷路径时,只需要在vite.config.js中配置好对应的别名即可

但是在vite中还需要在tsconfig.json中去配置你声明的别名,如下:

需要配置baseUrl和paths两个地方,配置好这两个地方后,项目基本上就不会在提示关于.ts文件找不到模块的问题了,具体为什么要这样写,暂时还不太清楚

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

相关文章

  • 深入理解vue-loader如何使用

    深入理解vue-loader如何使用

    本篇文章主要介绍了vue-loader,vue-loader是webpack下loader插件 可以把.vue文件输出成组件,有兴趣的可以了解一下
    2017-06-06
  • 详解vue如何封装封装一个上传多张图片的组件

    详解vue如何封装封装一个上传多张图片的组件

    上传图片不管是后台还是前端小程序,上传图片都是一个比不可少的功能有时候需要好几个页面都要上传图片,每个页面都写一个非常不方便,本文就给大家介绍vue如何封装一个上传多张图片的组件,需要的朋友可以参考下
    2023-07-07
  • vue中render函数和h函数以及jsx的使用方式

    vue中render函数和h函数以及jsx的使用方式

    这篇文章主要介绍了vue中render函数和h函数以及jsx的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue实现纵向的物流时间轴效果的示例代码

    Vue实现纵向的物流时间轴效果的示例代码

    在当今数字化的时代,用户体验的优化至关重要,物流信息的展示作为电商和供应链领域中的关键环节,其呈现方式直接影响着用户对货物运输状态的感知和满意度,所以本文介绍了Vue实现纵向的物流时间轴效果的方法,需要的朋友可以参考下
    2024-08-08
  • vue input实现点击按钮文字增删功能示例

    vue input实现点击按钮文字增删功能示例

    这篇文章主要介绍了vue input实现点击按钮文字增删功能,涉及基于vue.js的事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • vue项目运行超详细图解

    vue项目运行超详细图解

    这篇文章主要给大家介绍了关于vue项目运行的相关资料,文中通过图文介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue slot用法(小结)

    Vue slot用法(小结)

    这篇文章主要介绍了Vue slot用法(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 如何在vue3中使用滑块检验vue-puzzle-verification

    如何在vue3中使用滑块检验vue-puzzle-verification

    这篇文章主要介绍了在vue3中使用滑块检验vue-puzzle-verification的相关资料,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • vue实现点击图片放大效果

    vue实现点击图片放大效果

    这篇文章主要为大家详细介绍了vue实现点击图片放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现方法

    前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现方法

    token是一个用户信息的表示,在登录中将会从后端拿到token,然后用户才可以进行往后的一系列操作,这篇文章主要给大家介绍了关于前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现的相关资料,需要的朋友可以参考下
    2024-01-01

最新评论