【Vite + Vue + Ts 项目三个 tsconfig 文件】

Vite + Vue + Ts 项目三个 tsconfig 文件

[为什么 Vite + Vue + Ts 项目会有三个 tsconfig 文件？](#为什么 Vite + Vue + Ts 项目会有三个 tsconfig 文件？)
[首先我们先了解什么是 tsconfig.json ?](#首先我们先了解什么是 tsconfig.json ?)

为什么 Vite + Vue + Ts 项目会有三个 tsconfig 文件？

复制代码

在使用 Vite 创建 vue-ts 模板的项目时，会发现除了 tsconfig.json 外，还有一个 tsconfig.node.json 和 tsconfig.app.json 文件。并在 tsconfig.json 使用了 references 字段引用了其他两个文件

json 复制代码

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

首先我们先了解什么是 tsconfig.json ?

txt 复制代码

tsconfig.json 是 TypeScript 项目的配置文件，放在项目的根目录。主要供tsc编译器使用。 简单的用例：

json 复制代码

{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

txt 复制代码

示例的四个属性的含义。

include：指定哪些文件需要编译。
allowJs：指定源目录的 JavaScript 文件是否原样拷贝到编译后的目录。
outDir：指定编译产物存放的目录。
target：指定编译产物的 JS 版本。

TypeScript 3.0 新增的项目引用（Project References）功能，它允许用户为项目的不同部分使用不同的 TypeScript 配置。

txt 复制代码

关于 tsconfig.node.json, 注意到 "include": ["vite.config.ts"] 这段代码，它说明 tscnofig.node.json 是专门用于 vite.config.ts 这一文件的 TypeScript 配置文件。
关于 tsconfig.app.json, 注意到 "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] 这段代码，它说明 tscnofig.app.json 是专门用于 src 代码文件的。

故而，如果要控制 src 文件夹下的文件的编译行为的时候，就需要在 tsconfig.app.json 文件中添加对应的配置；反之，如果要控制 vite.config.ts 的编译行为就在 tsconfig.node.json 中添加配置。

txt 复制代码

实例：vite+ts+vue 项目，使用 Vuex 库的时候出现 无法找到模块"vuex"的声明文件。 的问题

在 tsconfig.app.json 中添加 "vuex":["./node_modules/vuex/types"], 即可。

json 复制代码

{
  "compilerOptions": {

    "paths":{
      "vuex":["./node_modules/vuex/types"],
    },
  }
}

```txt
"vuex":["./node_modules/vuex/types"]：
这里定义了一个路径映射规则。它告诉 TypeScript 编译器，当代码中导入（import）vuex 模块时，实际上应该从 "./node_modules/vuex/types" 路径下查找模块。这通常用于确保 TypeScript 能够正确地找到和解析 vuex 的类型定义。

txt 复制代码

故而，我们可以认为 tsconfig.node.json 和 tsconfig.app.json 只是作用在不同文件范围的编译配置文件。如果按照以往的单个 tsconfig.json 配置的形式就无法根据模块或者部分文件进行特殊的编译处理。

原文链接：https://juejin.cn/post/7431336795126054953