「报错解决」ts 文件不识别 .vue 文件（...src/App.vue.ts' is not a module）

【前言】本文章记录一下vue3项目下遇到的报错问题解决方法，如有问题也可以一起交流学习，目前也在不断学习中，若下面的内容有错误，请各位大佬指正，理性讨论，谢谢☃️

【备注】本文的实现均用 Vue3 + ts 实现，各位小伙伴可以采用其他的实现，react或者纯html都可以，只是方便使用就好，根据自己所需要的业务场景进行更换即可。本文会一直更新更新更新，在提出问题后，当有解决方案的时候会及时更新至此文档，没有找到解决方案的小伙伴可以耐心等待一段时间，或者有大佬找到解决方案欢迎私信或者评论留言。

【导读】

1. 问题描述
2. 问题排查
3. 解决问题

问题描述

利用 vue-cli 搭建的 vue3+vite+ts 项目在进入 main.ts中发现Vscode报错如下

问题排查

这个报错的红线极有可能是因为.ts文件不识别.vue文件而导致的，发现问题后第一时间就在env.d.ts中添加了如下代码

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

我心想这时候应该没问题了吧，结果他喵的红线还在……

测试了一下在src目录下新建类似的.d.ts文件重复写入上述代码，发现还是没用……

导入其他的.vue文件却没有什么问题

检查了一遍App.vue后发现我的代码如下

<template>
  <RouterView />
</template>
<script lang="ts"></script>
<style>
#components-layout-demo-side .logo {
  margin: 16px;
  height: 32px;
  background: rgb(255 255 255 / 30%);
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>

继续查相关资料，才发现问题出现在script标签上

解决问题

.vue文件中要默认有export default{}导出组件，不然ts是识别不了这个具体的.vue文件是用来做什么的。

解决方法如下：

1、引入defineComponent方法定义一个组件，然后利用export default{}导出组件，简单代码如下

import { defineComponent} from 'vue'
export default defineComponent({
  data() {
    return {
        ...
    }
  }
})

2、将<script lang="ts"> 改成 <script setup lang="ts">按照我的推测，setup应该也有自动作为模块进行导出

最终修改App.vue代码如下

<template>
  <RouterView />
</template>
<script setup lang="ts"></script>
<style>
#components-layout-demo-side .logo {
  margin: 16px;
  height: 32px;
  background: rgb(255 255 255 / 30%);
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>