【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

相关推荐
万邦科技Lafite1 分钟前
如何对接API接口?需要用到哪些软件工具?
java·前端·python·api·开放api·电商开放平台
知识分享小能手8 分钟前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
看晴天了13 分钟前
🌈 Tailwind CSS 常用类名总结
前端
看晴天了14 分钟前
Tailwind的安装,配置,使用步骤
前端
看晴天了16 分钟前
nestjs学习, PM2进程守护,https证书配置
前端
blues_C35 分钟前
Playwright MCP vs Chrome DevTools MCP vs Chrome MCP 深度对比
前端·人工智能·chrome·ai·chrome devtools·mcp·ai web自动化测试
木心操作1 小时前
nodejs动态创建sql server表
前端·javascript·sql
一个很帅的帅哥1 小时前
Vue中的data为什么是函数?
前端·javascript·vue.js·data
南屿im1 小时前
用 Node.js 开发命令行工具:打造你的高效 CLI
前端·javascript
小刘鸭地下城1 小时前
深入解析 Vue 的异步 DOM 更新机制:nextTick 的正确使用指南
vue.js