外观

vue3部分组件导入时爆红(Vue3+Ts)

约 345 字

VueTypeScript

在 webstorm 中导入部分组件时 IDE爆红，运行正常，但会导致构建错误的解决办法。

在使用 webstorm 开发 Vue3 + TS 项目时，编辑器一直有一个报错，因为不影响运行，所以就一直没在意，但有天准备部署到 netlify 时在 build 阶段出现错误，查看日志之后发现是 找不到 .vue 的声明文件 的错误，同时错误位置指向 import SearchInput from "@/components/SearchInputResult.vue" ，随后尝试在 IDE 构建时也出现了相同的错误。

24121401_01.png

最终找到错误原因为在 .d.ts 中缺少了对 *.vue 的 声明，解决办法是在 env.d.ts 加入以下代码：

declare module "*.vue" {
  import type { ComponentOptions } from "vue";
  const comp: ComponentOptions;
  export default comp;
}

这段代码是一个 TypeScript 的模块声明文件（通常以 .d.ts 扩展名保存）， 用于告诉 TypeScript 编译器如何处理以 .vue 为后缀的模块导入。在使用 Vue.js 进行项目开发， 尤其是结合 TypeScript 时，Vue 单文件组件（.vue 文件）需要有相应的类型定义， 以便 TypeScript 能够正确理解其结构和类型，这段声明就是起到这样的作用。但为什么导入其他组件没有出现这样的错误？我还没有找到原因所在。