当前位置：首页 > news >正文

tsconfig.json和tsconfig.node.json和tsconfig.app.json有什么区别

news 来源：原创 2025/6/9 5:34:25

通过pnpm i vite 生成vue3项目时，会生成三个ts配置文件，分别是什么作用呢?

在Vue 3项目中，tsconfig.json、tsconfig.node.json和tsconfig.app.json是三个不同的TypeScript配置文件，它们分别用于不同的场景和目的。其中tsconfig.node.json是专门用来配置vite.config.ts文件的编译规则，tsconfig.app.json则是用来定义项目中其他文件的ts编译规则。后面两个文件最终会被引入到tsconfig.json中

tsconfig.json主要配置文件基础共享配置

tsconfig.json是Vue 3项目的默认TypeScript配置文件。它包含了项目的全局配置，如编译选项、模块解析规则、类型检查规则等。这个配置文件适用于整个项目，包括Vue组件、JavaScript文件和其他TypeScript文件。

/* 文件作用共享基础配置: 通过引用子配置文件，tsconfig.json 提供了一个统一的入口，避免重复配置。分离环境配置: 将前端代码和 Node.js 环境的配置分开，便于针对性优化和管理。支持增量编译: 使用 references 可以启用 TypeScript 的增量编译功能，提高大型项目的编译性能。
*/
{// 用于显式指定需要包含在 TypeScript 编译中的文件。"files": [],// 项目引用（Project References）的配置，用于支持多配置文件的项目结构。// 通过这种方式，tsconfig.json 作为主配置文件，统一管理了子配置文件的依赖关系。"references": [// 用于配置前端代码（如 Vue 组件）的 TypeScript 编译规则。{ "path": "./tsconfig.app.json" },// 用于配置 Node.js 环境（如 vite.config.ts）的 TypeScript 编译规则{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json 检查 vite.config.ts 等构建配置文件

tsconfig.node.json是专门用于Node.js环境的TypeScript配置文件。它包含了Node.js特有的配置，如模块解析规则、类型检查规则等。这个配置文件通常用于处理Node.js模块，如node_modules中的第三方库。

{"compilerOptions": {// 指定TypeScript编译器生成的tsbuildinfo文件的路径"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",/* target用于指定编译之后的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'.  */"target": "ES2022",// 指定要包含在编译中的库文件，这里包含ES2023"lib": ["ES2023"],/* 用来指定要使用的模块标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */"module": "ESNext",// 跳过对库文件的类型检查 提高编译速度"skipLibCheck": true,/* Bundler mode  设置模块解析策略*/// 使用bundler模式进行模块解析 表示使用捆绑工具（如 Vite 或 Webpack）的模块解析方式，而不是传统的 Node.js 模块解析方式"moduleResolution": "bundler",// 允许导入带有.ts扩展名的文件"allowImportingTsExtensions": true,// 强制将每个文件视为单独的模块"isolatedModules": true,// 强制进行模块检测"moduleDetection": "force",// 不生成输出文件"noEmit": true,/* Linting *//* strict的值为true或false，用于指定是否启动所有类型检查，如果设为true则会同时开启下面这几个严格类型检查，默认为false */"strict": true,/* 用于检查是否有定义了但是没有使用的变量，对于这一点的检测，使用eslint可以在你书写代码的时候做提示，你可以配合使用。它的默认值为false */"noUnusedLocals": true,/* 用于检查是否有在函数体中没有使用的参数，这个也可以配合eslint来做检查，默认为false */"noUnusedParameters": true,/* 用于检查switch中是否有case没有使用break跳出switch，默认为false */"noFallthroughCasesInSwitch": true,// 禁止未检查的副作用导入// 如果你导入了一个模块但没有使用其导出的内容，TypeScript 会提示你检查该导入是否必要。// 这有助于避免不必要的导入，减少潜在的副作用，提高代码的可维护性和安全性。"noUncheckedSideEffectImports": true},// 指定要包含在编译中的文件，这里包含vite.config.ts"include": ["vite.config.ts"]
}

tsconfig.app.json 检查 src/ 目录下的前端代码

tsconfig.app.json是专门用于Vue组件的TypeScript配置文件。它包含了Vue组件特有的配置，如模块解析规则、类型检查规则等。这个配置文件通常用于处理Vue组件文件，如.vue文件。

{// 继承自 @vue 的 tsconfig.dom.json 配置文件，用于配置 TypeScript 编译选项"extends": "@vue/tsconfig/tsconfig.dom.json", "compilerOptions": {// 指定 TypeScript 编译信息的存储文件路径"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", /* Linting *//* strict的值为true或false，用于指定是否启动所有类型检查，如果设为true则会同时开启下面这几个严格类型检查，默认为false */"strict": true,/* 用于检查是否有定义了但是没有使用的变量，对于这一点的检测，使用eslint可以在你书写代码的时候做提示，你可以配合使用。它的默认值为false */"noUnusedLocals": true,/* 用于检查是否有在函数体中没有使用的参数，这个也可以配合eslint来做检查，默认为false */"noUnusedParameters": true,/* 用于检查switch中是否有case没有使用break跳出switch，默认为false */"noFallthroughCasesInSwitch": true,// 禁用未检查的副作用导入// 如果你导入了一个模块但没有使用其导出的内容，TypeScript 会提示你检查该导入是否必要。// 这有助于避免不必要的导入，减少潜在的副作用，提高代码的可维护性和安全性。"noUncheckedSideEffectImports": true },// 指定要包含在编译中的文件，包括 src 目录下的所有 .ts、.tsx 和 .vue 文件"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] 
}

通过pnpm i vite 生成vue3项目时，会生成三个ts配置文件，分别是什么作用呢?

tsconfig.json主要配置文件 基础共享配置

tsconfig.node.json 检查 vite.config.ts 等构建配置文件

tsconfig.app.json 检查 src/ 目录下的前端代码

相关文章：

tsconfig.json主要配置文件基础共享配置