Vue3专题精讲——Vue 3 + TypeScript 项目初始化报错，解决 TypeScript 配置继承中的‘@tsconfig/node22/tsconfig.json’文件找不到问题

解决 TypeScript 配置继承中的‘@tsconfig/node22/tsconfig.json’文件找不到

　　在最近的一次项目中，我尝试使用npm init vue@latest 命令来创建一个基于Vue 3和TypeScript的新项目。然而，在初始化完成后，我遇到了一个关于TypeScript配置文件的报错。报错信息指出，在继承基础配置文件时出现了问题，具体错误信息如下：

Path to base configuration file to inherit from (requires TypeScript version 2.1 or later), or array of base files, with the rightmost files having the greater priority (requires TypeScript version 5.0 or later).

　　这个错误通常与TypeScript的配置文件tsconfig.json中的extends字段有关。extends字段用于指定一个基础配置文件，当前配置文件将继承该基础配置文件的所有设置。在我的项目中，tsconfig.json文件试图继承@tsconfig/node22/tsconfig.json，但似乎出现了问题。

一、排查与解决步骤

　　1.1、 检查 TypeScript 版本

    1. 首先，我检查了项目中安装的TypeScript版本。由于@tsconfig/node22可能需要特定版本的TypeScript，因此确保项目中安装的TypeScript版本满足要求是非常重要的。
    2. 可以通过运行npm list typescript或yarn list typescript来查看当前项目中安装的TypeScript版本。 
      $ npm list typescript
vblog-web@0.0.0 D:\worker-go\vblogfullstack\vblog-web
└── (empty)

1.2、安装或更新

    1. TypeScript如果发现TypeScript版本过低，可以通过运行npm install typescript@latest或指定一个特定版本来更新TypeScript。
    2. 同样，确保@tsconfig/node22也已正确安装，可以通过npm install @tsconfig/node22 安装。 
      $ npm install @tsconfig/node22

up to date in 1s

75 packages are looking for funding
  run `npm fund` for details

1.3、检查 tsconfig.json 配置

    1. 打开tsconfig.json文件，仔细检查extends字段的路径是否正确。 
      未修改前：

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ]
}
    2. 确保@tsconfig/node22/tsconfig.json文件确实存在于node_modules目录中，这一步骤过于简单，自行检查，不做截图。

1.4、尝试简化配置

    1. 如果问题依旧存在，可以尝试简化tsconfig.json文件，暂时移除extends字段，看看项目是否能正常编译。
    2. 这有助于确定问题是否确实由 extends 字段引起。

二、解决方案

　　在我的情况下，通过 2.3 方案得到了解决。我总结了有 3 种不同的解决方案，见下：

2.1、安装缺失的依赖（方案一）

npm install @tsconfig/node22 --save-dev
# 或者使用 yarn
yarn add @tsconfig/node22 --dev

2.2、修改 tsconfig.node.json 文件（方案二）

　　如果不需要使用@tsconfig/node22，可以直接移除或替换为其他配置文件。例如：

{
  "extends": "./tsconfig.base.json", // 假设有一个基础配置文件
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

2.3、创建本地 tsconfig 文件（方案三）

　　　　如果确实需要自定义配置，可以在项目根目录下创建一个tsconfig.base.json文件，并在其中定义所需的编译选项。

// tsconfig.base.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

　　　　然后在 tsconfig.node.json 中引用它：

{
  "extends": "./tsconfig.base.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "types": ["node"]
  }
} 

三、总结

　　在创建 Vue 3 + TypeScript 项目时，遇到 TypeScript 配置报错是一个相对常见的问题。

　　通过仔细核查 TypeScript 的版本兼容性、及时更新项目依赖、精简并优化配置文件，以及充分利用官方文档和社区资源，我们往往能够追溯到问题的根源，并找到有效的解决方案。

　　希望这篇分享能够为同样面临此类难题的开发者们提供助力，让大家能够顺利启程，成功初始化并运行自己的前端项目。

posted @ 2025-01-19 20:13  左扬  阅读(1946)  评论(0)    收藏  举报