相关文章推荐
苦闷的奔马  ·  Xcode打印不出任何东西 || ...·  4 月前    · 
任性的紫菜汤  ·  vue项目中$t(‘‘)的意思是什么_vue ...·  9 月前    · 
失恋的白开水  ·  shell判断一个变量是否为空方法总结-腾讯 ...·  1 年前    · 
憨厚的移动电源  ·  Guava Cache用法介绍 - ...·  1 年前    · 
儒雅的豆芽  ·  Oracle ...·  1 年前    · 
Code  ›  VSCode 中,TS 提示 ”无法找到 *.vue 声明文件“ 的解决方案开发者社区
include vue ts vscode
https://cloud.tencent.com/developer/article/1883598
勤奋的毛衣
1 年前
作者头像
编程三昧
0 篇文章

VSCode 中,TS 提示 ”无法找到 *.vue 声明文件“ 的解决方案

原创
前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > 编程三昧 > VSCode 中,TS 提示 ”无法找到 *.vue 声明文件“ 的解决方案

VSCode 中,TS 提示 ”无法找到 *.vue 声明文件“ 的解决方案

原创
作者头像
编程三昧
修改 于 2021-09-29 09:51:47
1.1K 0
修改 于 2021-09-29 09:51:47
举报

在使用 VSCode 开发 Vue3 + TS 项目时,编辑器一直有一个报错,因为不影响编译和运行,所以就一直没在意,但这两天看着这红杠提示实在是太别扭,今天就来解决一下这个问题,还自己一个清爽的开发环境。

在网上查找了很多资料,靠谱的不好找,但是功夫不负有心人,最终问题还是解决了,在这里记录一下,避免日后踩坑,也给有需要的朋友省点查找资料的麻烦。

报错信息

具体的报错信息如下图所示:

找不到 .vue 的声明文件,实际上就是 TS 无法识别 .vue 类型的文件。

那么就需要添加一下 .vue 类型文件的声明,步骤如下:

  1. 在根目录(也就是 tsconfig.json这一级)下新建名为 ”vue.d.ts“ 的文件。文件名中的 ”vue“ 也可以改为任一名称。
  2. 在 ”vue.d.ts“ 文件中写入以下声明:
``` js
// 以下两种方案二选一
// 方案一
declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
// 方案二
declare module '*.vue' {
  import { defineComponent } from 'vue'
  const Component: ReturnType<typeof defineComponent>
  export default Component
}
```
  1. 在 ”tsconfig.json“ 中,将第二步中创建的文件 ”vue.d.ts“(或者你自己新建的其他名称的 .d.ts 文件)添加到 include 中:
``` js
"include": [
   "vue.d.ts"
],
```
我这边完整的 include 属性如下(我新建的是 ”app.d.ts“):
![image-20210928201121606](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b8f12556b1c4dd88a5bebda72a08576~tplv-k3u1fbpfcp-zoom-1.image)

结果

最后,我们来看一下 VSCode 中是否还有红杠报错:

报错信息没有了,大功告成!

总结

一个清爽的开发环境有助于我们保持身心愉悦,自然而然也就提高了工作效率,没有红杠的代码看着果然舒服多了!

~

~本文完,感谢阅读!

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好,我是〖 编程三昧 〗的作者 隐逸王 ,我的公众号是『 编程三昧 』,欢迎关注,希望大家多多指教!

你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!

知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

vue.js

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

vue.js
评论
登录 后参与评论
0 条评论
热度
最新
登录 后参与评论
关于作者
编程三昧
0
文章
0
累计阅读量
0
获赞
前往专栏
目录
  • 报错信息
  • 结果
  • 总结
领券
  • 社区

    • 专栏文章
    • 阅读清单
    • 互动问答
    • 技术沙龙
    • 技术视频
    • 团队主页
    • 腾讯云TI平台
  • 活动

    • 自媒体分享计划
    • 邀请作者入驻
    • 自荐上首页
    • 技术竞赛
  • 资源

    • 技术周刊
    • 社区标签
    • 开发者手册
    • 开发者实验室
  • 关于

    • 社区规范
    • 免责声明
    • 联系我们
    • 友情链接

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

  • 域名注册
  • 云服务器
  • 区块链服务
  • 消息队列
  • 网络加速
  • 云数据库
  • 域名解析
  • 云存储
  • 视频直播

热门推荐

  • 人脸识别
  • 腾讯会议
  • 企业云
  • CDN加速
  • 视频通话
  • 图像分析
  • MySQL 数据库
  • SSL 证书
  • 语音识别

更多推荐

  • 数据安全
  • 负载均衡
  • 短信
  • 文字识别
  • 云点播
  • 商标注册
  • 小程序开发
  • 网站监控
  • 数据迁移

Copyright © 2013 - 2023 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

深圳市腾讯计算机系统有限公司 ICP备案/许可证号: 粤B2-20090059 深公网安备号 44030502008569

腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

问题归档 专栏文章 快讯文章归档 关键词归档 开发者手册归档 开发者手册 Section 归档

Copyright © 2013 - 2023 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
 
推荐文章
苦闷的奔马  ·  Xcode打印不出任何东西 || 打印过多信息_xcode控制台打印信息不显示-CSDN博客
4 月前
任性的紫菜汤  ·  vue项目中$t(‘‘)的意思是什么_vue $t-CSDN博客
9 月前
失恋的白开水  ·  shell判断一个变量是否为空方法总结-腾讯云开发者社区-腾讯云
1 年前
憨厚的移动电源  ·  Guava Cache用法介绍 - Boblim - 博客园
1 年前
儒雅的豆芽  ·  Oracle 变量窥视引起执行计划异常故障分析_ITPUB博客
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号