Vue3 Typescript导入组件报错“Component is not a module”求排查方案

数据老陈

2026-8-1

Vue组件导入报错“Component is not a module”解决思路

问题场景

导入自定义Pagination组件时出现错误提示“Component is not a module”，相关代码如下：

子组件（PaginationComponent.vue）

<template>
  <div class="pagination">
    <span>
      <h3>Pagination</h3>
      <p>Previous</p>
      <p>Next</p>
    </span>
  </div>
</template>

<script lang="ts"></script>

<style scoped lang="scss"></style>

父组件

<template>
  <nav>
    <router-link to="/">Photos</router-link> |
    <router-link to="/posts">Posts</router-link>
    <Pagination />
  </nav>
  <router-view />
</template>

<script setup lang="ts">
import Pagination from "@/components/PaginationComponent.vue";
</script>

解决思路

补全子组件的导出配置
子组件的<script>标签为空且未使用setup语法，TypeScript无法识别其为Vue模块。将子组件的script标签修改为<script setup lang="ts"></script>，Vue会自动处理组件导出，无需手动编写导出代码。
验证文件路径与名称
1. 确认@别名已正确配置指向项目的src目录（通常在vite.config.ts或vue.config.js中配置）。
2. 检查PaginationComponent.vue是否确实存在于src/components目录下，注意文件名的大小写（Linux/macOS环境区分大小写，Windows不区分）。
检查TypeScript类型配置
确保项目的tsconfig.json中包含Vue文件的类型支持：
- 在compilerOptions.types中添加"vue"；
- 确保src/vite-env.d.ts（或对应的环境声明文件）中有/// <reference types="vite/client" />，该声明包含了.vue文件的类型定义。
清除缓存并重启服务
重启项目的开发服务器（如Vite、Vue CLI），同时重启编辑器（如VS Code）以清除TypeScript的缓存，避免因缓存导致的模块识别异常。