Skip to content

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

345字约1分钟

DeBugVue

2024-12-14

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 能够正确理解其结构和类型,这段声明就是起到这样的作用。但为什么导入其他组件没有出现这样的错误?我还没有找到原因所在。