vue3+ts项目文件标红

标红问题是由于在Vue 3 TypeScript项目中导入`.vue`文件时，TypeScript默认无法处理`.vue`文件的代码所致。为了解决这个问题，可以按照以下步骤进行操作：

1. 首先，确保已经安装了volar插件，并卸载了vuter插件。

2. 其次，在项目的根目录下找到`tsconfig.json`文件，并添加以下配置项：

   "vueCompilerOptions": {
     "experimentalDisableTemplateSupport": true
   }

3. 然后，在根目录下创建一个名为`vite-env.d.ts`的文件（如果已存在，请直接打开），并添加以下代码：

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

通过以上三个步骤，可以解决Vue 3 TypeScript项目中`.vue`文件标红的问题。这样，TypeScript就能正确处理`.vue`文件的代码了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3+ts+piniajs代码爆红的解决方法](https://blog.csdn.net/qq_27702739/article/details/125059186)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [解决Vue3+Vite+TS创建的项目中‘./App.vue‘标红问题](https://blog.csdn.net/weixin_53141315/article/details/132069833)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]