vue项目启动报错TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]'

报错内容

vue项目启动报错ERROR in D:\myselfProject\new-vue-project\tsconfig.json
./src/Article.vue?vue&type=template&id=340f2be6&ts=true (./node_modules/ts-loader/index.js??clonedRuleSet-41!./node_modules/vue-loader/dist/templateLoader.js??rul
eSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/Article.vue?vue&type=template&id=340f2be6&ts=true) D:\myselfProject\new-vue-proj
ect\tsconfig.json
[tsl] ERROR
      TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]'
 and 'exclude' paths were '["node_modules"]'.

好的，用户遇到了Vue项目启动时TypeScript报错TS18003的问题，这个错误提示表明TypeScript在配置的路径中找不到需要编译的输入文件。从错误信息看，用户的tsconfig.json中配置了include路径为["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]，但依然报错。

 

 

我需要帮用户系统地分析和解决这个问题。根据我看到的搜索结果15，这个错误通常是因为TypeScript编译器找不到符合配置条件的源文件。虽然配置了include路径，但实际项目中可能缺少对应的文件或目录结构不匹配。

 

 

我打算从几个关键方面来帮助用户解决这个问题：首先需要检查项目目录结构，确保src目录存在且包含TypeScript或Vue文件；然后需要验证tsconfig.json配置的正确性；还需要确保TypeScript能识别.vue文件；最后要考虑Vue和TypeScript环境的完整性。

 

 

从搜索结果1可以看到，解决这个问题的方法之一是在src下建立一个ts文件，这是因为创建tsconfig.json配置文件时，编辑器或TypeScript编译器会自动检测当前项目当中是否有ts文件，若没有则可能报错。

 

 

我还注意到搜索结果6提到TypeScript不能直接识别.vue文件，需要引入vue的typescript declare库或者在tsconfig.json中加入相应的配置。这也是一个需要关注的点。

 

 

我考虑设计一个全面的回答，先用一个表格总结常见原因和解决方案，让用户能快速对照检查，然后再详细解释每个步骤。这样既能提供清晰的指引，又能让用户理解背后的原理。

 

 

对于表格后的详细解释，我会逐步指导用户如何检查目录结构、验证配置、添加类型声明、检查开发环境等。最后还会提供一个完整的tsconfig.json示例供用户参考。

 

 

需要注意的是，这些搜索结果中的信息有些比较旧(2021-2022年)，而Vue和TypeScript生态发展较快，我会确保提供的解决方案也适用于当前最新版本。

遇到这个 TypeScript 报错别担心，这通常意味着 TypeScript 编译器在你的项目配置路径中找不到需要编译的源文件。虽然你的 tsconfig.json 中配置了 include 路径，但实际项目中可能缺少对应的文件，或者配置和项目结构有些出入。我来帮你一步步分析和解决。

首先，我用一个表格来总结一下可能的原因和相应的解决方案，让你先有个整体的认识：

可能原因	解决方案
src目录缺失或src目录下缺少相应的TypeScript/Vue文件	检查目录结构，创建缺失的目录或文件。
tsconfig.json 中的 include/exclude 路径配置不正确	检查并修正 tsconfig.json 中的路径配置。
TypeScript 无法识别 .vue 文件	确保安装了必要的依赖，并添加 .vue 类型声明文件。
TypeScript 版本与项目或其他依赖（如 @tsconfig/node22）不兼容	检查并更新 TypeScript 版本，或调整 tsconfig.json 的 extends 配置。
Vue 和 TypeScript 开发环境配置不完整	确保使用了正确的 Vue CLI 插件，并重启开发服务器和 IDE。

---

下面我们一步步来排查和解决：

🔍 1. 检查项目目录结构和文件

首先，确认你的项目根目录下存在 src 文件夹，并且里面包含了至少一个以下类型的文件（这是 TypeScript 编译器要编译的源文件）：

• .ts (TypeScript 文件)

• .tsx (TSX 文件，用于 JSX)

• .vue (Vue 单文件组件)

• .d.ts (类型声明文件)

如果 src 目录不存在，或者里面空空如也，编译器自然就找不到输入文件了15。

• 解决方法：

  • 如果 src 目录缺失，请创建它：mkdir src。

  • 如果 src 目录为空，你可以尝试创建一个简单的 TypeScript 文件（例如 main.ts）或 Vue 组件文件（例如 App.vue）。

⚙️ 2. 检查 tsconfig.json 配置

打开你的 tsconfig.json 文件，重点关注 include 和 exclude 字段。你的配置是：

json

 

"include": [
  "src/**/*.ts",
  "src/**/*.d.ts",
  "src/**/*.tsx",
  "src/**/*.vue"
],
"exclude": [
  "node_modules"
]

这看起来很标准，意思是包含 src 目录下所有指定类型的文件，并排除 node_modules 目录。

• 解决方法：

  • 确保这些路径与你的实际项目结构相匹配。比如，如果你的源代码不在 src 目录下，或者在另一个子目录里，就需要修改 include 的路径。

  • 检查是否有拼写错误。

  • 如果你使用的是 JavaScript 而非 TypeScript，需要将 include 中的 *.ts 和 *.tsx 改为 *.js 和 *.jsx。

📝 3. 添加 .vue 文件的类型声明（重要）

TypeScript 默认无法理解 .vue 单文件组件（SFC）。虽然错误信息里已经包含了 "src/**/*.vue"，但如果缺乏必要的类型声明，依然可能出问题6。

• 解决方法：
  在项目根目录或 src 目录下创建一个以 .d.ts 为后缀的类型声明文件（例如 vue-shims.d.ts 或 shims-vue.d.ts），并包含以下内容16：

  typescript

   

  // vue-shims.d.ts
  declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
  }

  确保你的 tsconfig.json 的 include 数组包含了这个声明文件所在的路径（例如 "src/**/*.d.ts"）。

🔄 4. 检查 TypeScript 版本和配置继承

有时，tsconfig.json 会通过 extends 字段继承其他基础配置（例如 "@tsconfig/node22"）。如果项目中没有安装这些指定的基础配置包，或者 TypeScript 版本与之不兼容，也会引发问题3。

• 解决方法：

  • 检查 package.json 中 TypeScript 的版本：npm list typescript。

  • 如果需要，更新 TypeScript：npm install -D typescript@latest。

  • 如果 tsconfig.json 继承了某个配置（如 "extends": "@tsconfig/node22/tsconfig.json"），请确保已安装该包：npm install -D @tsconfig/node223。

  • 如果暂时不想处理继承问题，可以注释掉或移除 extends 配置，直接在当前的 tsconfig.json 中定义完整的 compilerOptions。或者，创建一个本地的 tsconfig.base.json 文件来继承3。

💻 5. 确保 Vue 和 TypeScript 环境配置正确

如果你是使用 Vue CLI 创建的项目，但创建时没有选择 TypeScript，后续手动添加配置可能会遗漏一些东西。

• 解决方法：

  • 对于 Vue CLI 项目，最好通过官方插件来添加 TypeScript 支持：

  bash

   

  vue add typescript

  • 运行命令后，根据提示选择适合的选项。这会自动配置好 tsconfig.json、必要的依赖和 Webpack 加载器。

🔧 6. 重启依赖服务

在进行了上述任何修改之后，务必重启你的开发服务器和 IDE（如 VSCode）：

1. 停止当前运行的 npm run serve 或 npm run dev。

2. 重新运行启动命令。

3. 如果使用 VSCode：按下 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac)，输入并选择 "TypeScript: Restart TS Server"。这能解决许多由 TS 语言服务缓存引起的玄学问题。

---

📋 一个基本的 tsconfig.json 示例

如果你的项目结构比较简单，可以参考下面这个基础的 tsconfig.json 配置59：

json

 

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    // 如果自定义了 .d.ts 文件的位置，请确保包含其路径，例如：
    "*.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

---

💎 总结

按照以上步骤，尤其是检查目录文件是否存在、确认 tsconfig.json 配置路径以及添加 .vue 文件的类型声明，应该能解决你遇到的 TS18003 错误。

如果问题依旧，可以检查一下终端里是否还有其他先于这个错误出现的报错信息，那可能是更深层次的根源。

希望这些步骤能帮你顺利启动项目！

 

本回答由 AI 生成，内容仅供参考，请仔细甄别。

 

开启新对话