Vue3/TypeScript导入接口报错：模块未提供默认导出

第一步：检查Job.ts的导出语法是否正确 #

TypeScript里接口的默认导出要严格遵循语法，正确写法如下：

// src/types/Job.ts
interface Job {
  id: number;
  title: string;
  // 其他接口字段
}

export default Job;

别误写成命名导出（export interface Job {}），这种写法属于命名导出，和你后续的默认导入不匹配，会直接导致找不到default导出的错误。

第二步：核对App.vue的导入语法 #

默认导入的正确写法是：

<script setup lang="ts">
// 直接导入，不需要花括号
import Job from '/src/types/Job.ts';
// 若项目配置了路径别名，也可以写成 import Job from '@/types/Job';

// 示例使用
const currentJob: Job = { id: 1, title: '前端开发工程师' };
</script>

如果写成了import { Job } from '/src/types/Job.ts'，这是命名导入的写法，和你的默认导出逻辑不兼容，必然触发报错。

第三步：检查TypeScript配置（tsconfig.json） #

确认compilerOptions里的两个关键配置：

• module需设置为支持ES模块的值，比如ESNext或ES6，避免CommonJS模块规范的兼容问题
• allowSyntheticDefaultImports设为true，可以让TypeScript更好地处理默认导出的兼容场景

参考配置示例：

{
  "compilerOptions": {
    "module": "ESNext",
    "allowSyntheticDefaultImports": true
  }
}

第四步：清除缓存并重启开发服务 #

开发服务器的缓存可能导致模块导出识别异常，按以下步骤操作：

• 关闭当前运行的开发服务
• 删除项目根目录下的node_modules/.cache文件夹（或Vue项目的dist目录）
• 重新启动开发服务，再测试导入是否正常

第五步：验证文件路径准确性 #

确认导入路径/src/types/Job.ts没有拼写错误，注意在Linux/macOS环境下文件名大小写敏感，如果项目配置了路径别名（比如@指向src），建议用别名写法避免路径错误。

内容的提问来源于stack exchange，提问作者JuniorDev