Typescript中导入vue文件报错

py_boy

于 2020-08-20 15:13:30 发布

阅读量7.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/py_boy/article/details/108124230

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了解决在TypeScript环境中导入Vue组件时遇到的找不到模块错误的方法。对于Vue2，通过创建shims.d.ts文件并声明模块来解决；Vue3则需使用defineComponent进行声明，同时调整tsconfig.json配置。确保类型定义正确，避免类型不匹配问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Typescript导入vue文件爆出找不到模块，解决办法：

vue 2的解决办法，针对vue文件导入报错

创建一个shims.d.ts文件，放置到src/globalDeclare中

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

vue 3.0的解决办法，针对vue文件导入报错

vue3.0中使用上述办法，会使createApp与vue类型不符合
在这里插入图片描述
导致Vue类型与PublicAPIComponent不符合

因此vue3中的声明方法使用以下办法：

declare module '*.vue' {
  import { defineComponent } from 'vue';

  const Component: ReturnType<typeof defineComponent>;
  export default Component;
}

注意，该模块声明需要单独创建文件声明

在tsconfig.json中添加

{
	"compilerOptions"： {
		"typeRoots"： [
			"src/globalDeclare"
		]
	}
}

通过上述办法将不会报错