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

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

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

  • 为什么 Vite + Vue + Ts 项目会有三个 tsconfig 文件?
  • 首先我们先了解什么是 tsconfig.json ?

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

在使用 Vite 创建 vue-ts 模板的项目时,会发现除了 tsconfig.json 外,还有一个 tsconfig.node.json 和 tsconfig.app.json 文件。并在 tsconfig.json 使用了 references 字段引用了其他两个文件
{"files": [],"references": [{"path": "./tsconfig.node.json"},{"path": "./tsconfig.app.json"}]
}

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

tsconfig.json 是 TypeScript 项目的配置文件,放在项目的根目录。主要供tsc编译器使用。 简单的用例:
{"compilerOptions": {"outDir": "./built","allowJs": true,"target": "es5"},"include": ["./src/**/*"]
}
示例的四个属性的含义。include:指定哪些文件需要编译。
allowJs:指定源目录的 JavaScript 文件是否原样拷贝到编译后的目录。
outDir:指定编译产物存放的目录。
target:指定编译产物的 JS 版本。

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

关于 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 中添加配置。
实例:vite+ts+vue 项目,使用 Vuex 库的时候出现 无法找到模块“vuex”的声明文件。 的问题在 tsconfig.app.json 中添加 "vuex":["./node_modules/vuex/types"], 即可。
{"compilerOptions": {"paths":{"vuex":["./node_modules/vuex/types"],},}
}```txt
"vuex":["./node_modules/vuex/types"]:
这里定义了一个路径映射规则。它告诉 TypeScript 编译器,当代码中导入(import)vuex 模块时,实际上应该从 "./node_modules/vuex/types" 路径下查找模块。这通常用于确保 TypeScript 能够正确地找到和解析 vuex 的类型定义。
故而,我们可以认为 tsconfig.node.json 和 tsconfig.app.json 只是作用在不同文件范围的编译配置文件。如果按照以往的单个 tsconfig.json 配置的形式就无法根据模块或者部分文件进行特殊的编译处理。

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

相关文章:

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

Vite Vue Ts 项目三个 tsconfig 文件 为什么 Vite Vue Ts 项目会有三个 tsconfig 文件?首先我们先了解什么是 tsconfig.json ? 为什么 Vite Vue Ts 项目会有三个 tsconfig 文件? 在使用 Vite 创建 vue-ts 模板的项目时,会发现除了 ts…...

AI时代IT行业职业方向规划大纲

一、引言 AI时代的颠覆性影响 ChatGPT、Midjourney等生成式AI对传统工作模式的冲击 案例:AI编程助手(GitHub Copilot)改变开发者工作流程 核心问题:IT从业者如何避免被AI替代,并找到新机遇? 二、AI时代…...

Mac M1 Comfyui 使用MMAudio遇到的问题解决?

问题1: AssertionError: Torch not compiled with CUDA enabled? 解决办法:修改代码以 CPU 运行 第一步:找到 /ComfyUI/custom_nodes/ComfyUI-MMAudio/mmaudio/ext/autoencoder/vae.py文件中的下面这两行代码 self.data_mean nn.Buffer(t…...

大语言模型深度研究功能:人类认知与创新的新范式

在人工智能迅猛发展的今天,大语言模型(LLM)的深度研究功能正在成为重塑人类认知方式的关键力量。这一突破性技术不仅带来了工具层面的革新,更深刻地触及了人类认知能力的本质。本文将从认知科学的角度出发,探讨LLM如何…...

[SAP ABAP] 性能优化

1.数据库编程OPEN SQL方面优化 1.避免使用SELECT *,只查询需要的字段即可 尽量使用SELECT f1 f2 ... (具体字段) 来代替 SELECT * 写法 2. 如果确定只查询一条数据时,使用 SELECT SINGLE... 或者是 SELECT ...UP TO 1 ROWS ... 使用语法 UP TO n ROWS 来…...

并行计算、分布式计算与云计算:概念剖析与对比研究(表格对比)

什么是并行计算?什么是分布计算?什么是云计算?我们如何更好理解这3个概念,我们采用概念之间的区别和联系的方式来理解,做到切实理解,深刻体会。 1、并行计算与分布式计算 并行计算、分布式计算都属于高性…...

ASP.NET Core Filter

目录 什么是Filter? Exception Filter 实现 注意 ActionFilter 注意 案例:自动启用事务的筛选器 事务的使用 TransactionScopeFilter的使用 什么是Filter? 切面编程机制,在ASP.NET Core特定的位置执行我们自定义的代码。…...

doris:删除操作概述

在 Apache Doris 中,删除操作(Delete)是一项关键功能,用于管理和清理数据,以满足用户在大规模数据分析场景中的灵活性需求。 Doris 提供了丰富多样的删除功能支持,包括:DELETE 语句、删除标记&…...

【思维导图】redis

学习计划:将目前已经学的知识点串成一个思维导图。在往后的学习过程中,不断往思维导图里补充,形成自己整个知识体系。对于思维导图里的每个技术知识,自己用简洁的话概括出来, 训练自己的表达能力。...

申博经验贴

1. 所谓申博,最重要的就是定制的海投 分成两个部分 1. 定制 要根据每个教授去写不同的,一定不要泛泛的去写,一定要非常非常的具体,要引起教授的兴趣。每个教授每天都会收到几十封邮件,所以要足够的引起教授的注意&a…...

.Net Core笔记知识点(跨域、缓存)

设置前端跨域配置示例: builder.Services.AddCors(option > {option.AddDefaultPolicy(policy > {policy.WithOrigins(originUrls).AllowAnyMethod().AllowAnyHeader().AllowCredentials();});});var app builder.Build();app.UseCors(); 【客户端缓存】接…...

YOLOV11-1:YoloV11-安装和CLI方式训练模型

YoloV11-安装和CLI方式训练模型 1.安装和运行1.1安装的基础环境1.2安装yolo相关组件1.3命令行方式使用1.3.1 训练1.3.2 预测 本文介绍yoloV11的安装和命令行接口 1.安装和运行 1.1安装的基础环境 GPU环境,其中CUDA是12.4版本 1.2安装yolo相关组件 # 克隆github…...

自学习记录-编程语言的特点(持续记录)

我学习的顺序是C -> python -> C -> Java。在讲到某项语言的特点是,可能会时不时穿插其他语言的特点。 Java 1 注解Annotation Python中也有类似的Decorators。以下为AI学习了解到的: Java的Annotation是一种元数据(metadata)&a…...

TypeScript (TS) 和 JavaScript (JS)

TypeScript (TS) 和 JavaScript (JS) 的区别主要在于 TypeScript 是 JavaScript 的一个超集,它在 JavaScript 基础上增加了类型系统和一些高级功能。让我们详细看看两者的区别和关系: 类型系统: TypeScript 最大的特点是 静态类型。在 TypeSc…...

【HarmonyOS之旅】基于ArkTS开发(二) -> UI开发三

目录 1 -> 绘制图形 1.1 -> 绘制基本几何图形 1.2 -> 绘制自定义几何图形 2 -> 添加动画效果 2.1 -> animateTo实现闪屏动画 2.2 -> 页面转场动画 3 -> 常见组件说明 1 -> 绘制图形 绘制能力主要是通过框架提供的绘制组件来支撑,支…...

如何选择Spring AOP的动态代理?JDK与CGLIB的适用场景?

在Spring AOP中,选择JDK动态代理还是CGLIB动态代理取决于目标对象的特性以及具体需求。以下是两种代理方式的适用场景和特点: JDK动态代理 • 适用场景: • 目标对象实现了接口:JDK动态代理要求目标对象必须实现至少一个接口&a…...

手机连接WIFI可以上网,笔记本电脑连接WIFI却不能上网? 解决方法?

原因:DNS受污染了 解决办法 step 1:清空域名解析记录(清空DNS) ipconfig /flushdns (Windows cmd命令行输入) step 2:重新从DHCP 获取IP ipconfig /release(释放当前IP地址) ipconfig /renew &…...

MySQL不适合创建索引的11种情况

文章目录 前言1. **数据量小的表**2. **频繁更新的列**3. **低选择性的列**4. **频繁插入和删除的表**5. **查询中很少使用的列**6. **大文本或BLOB列**7. **复合索引中未使用的前导列**8. **频繁进行批量插入的表**9. **查询返回大部分数据的表**10. **临时表**11. **列值频繁…...

树莓派pico入坑笔记,故障解决:请求 USB 设备描述符失败,故障码(43)

今天心血来潮,拿出吃灰的pico把玩一下,打开thonny,上电,然后...... 上电识别不到端口,windows报错,请求 USB 设备描述符失败,故障码(43) 一开始以为是坏了(磕…...

GRE阅读双线阅读 --青山学堂GRE全程班 包括 阅读、数学、写作、填空、背单词

新版GRE考试整体结构 section题量时间写作1篇issue30min语文S112道题(7道填空5道阅读)18min数学S112道题21min语文S215道题(7道填空8道阅读)23min数学S215道题26min Tips: 写作结束后,语文和数学的顺序不固定,2中可能: issue -> V ->…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...

【JavaEE】-- HTTP

1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异&#xff…...

数据链路层的主要功能是什么

数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则&#xf…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...