---
url: /article/24121401/index.md
---
在 *Webstorm* 中导入部分组件时 IDE TypeScript 检查错误，运行正常，但会导致构建错误的解决办法。

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

![24121401\_01.png](/assets/24121401_01.png)

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

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