当前位置:   article > 正文

解决Vue3+Vite+TS创建的项目中‘./App.vue‘标红问题_vue项目名称是红色

vue项目名称是红色

问题:

vscode中创建Vue3+Vite+TS项目后在main.ts中'./App.vue'报红

 

 解决:在根目录下的 vite-env.d.ts 文件中写入如下代码

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

 分析:标红原因是在 `.vue` 文件中,通常会存在模板、样式和脚本等不同的部分,但是 TypeScript 默认不知道如何处理.vue文件的代码,因此在导入 `.vue` 文件时会报错。

通过在 `vite-env.d.ts` 文件中声明模块 `*.vue`,并将其定义为一个 Vue 组件类型,就相当于告诉 TypeScript 编译器如何正确处理这些 `.vue` 文件。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/119672
推荐阅读
相关标签
  

闽ICP备14008679号