vue3部分组件导入时爆红(Vue3+Ts)
在 webstorm
中导入部分组件时 IDE爆红
,运行正常,但会导致构建错误的解决办法。
在使用 webstorm
开发 Vue3 + TS 项目时,编辑器一直有一个报错,因为不影响运行,所以就一直没在意,但有天准备部署到 netlify
时在 build
阶段出现错误,查看日志之后发现是 找不到 .vue 的声明文件 的错误,同时错误位置指向 import SearchInput from "@/components/SearchInputResult.vue"
,随后尝试在 IDE 构建时也出现了相同的错误。
最终找到错误原因为在 .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
能够正确理解其结构和类型,这段声明就是起到这样的作用。但为什么导入其他组件没有出现这样的错误?我还没有找到原因所在。