在 Vue 3 中实现复制内容时追加固定信息

今天在工作中遇到了一个需求：用户复制页面中的某段文本时，需要在复制的内容后自动追加固定的作者出处信息。这个功能看起来简单，但涉及到浏览器的剪贴板事件处理和 Vue 3 的生命周期管理。于是，我决定记录一下实现过程，方便以后回顾。

#### 需求分析
1. **功能目标**：
   - 页面中展示一段文本。
   - 用户复制这段文本时，自动在复制的内容后追加固定的作者出处信息。

2. **技术实现**：
   - 使用 Vue 3 的 `<script setup>` 语法和 TypeScript。
   - 监听浏览器的 `copy` 事件。
   - 在事件处理函数中修改剪贴板的内容。

#### 实现步骤

##### 1. 创建 Vue 3 项目
首先，我创建了一个 Vue 3 项目，并确保项目中已经配置了 TypeScript 支持。如果还没有项目，可以通过以下命令创建一个：

```bash
npm create vue@latest
```

然后选择 TypeScript 作为语言支持。

##### 2. 编写页面结构
在 `App.vue` 中，我编写了一个简单的页面结构，展示一段文本：

```vue
<template>
  <div>
    <p ref="contentRef">
      这是一段示例文本，用户复制时会自动追加作者出处信息。
    </p>
  </div>
</template>
```

##### 3. 监听复制事件
接下来，我需要监听浏览器的 `copy` 事件，并在事件处理函数中修改剪贴板的内容。具体实现如下：

```typescript
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

// 定义要追加的固定内容
const fixedContent = '\n\n作者：某某某\n出处：某某网站';

// 获取段落元素的引用
const contentRef = ref<HTMLElement | null>(null);

// 监听复制事件
const handleCopy = (event: ClipboardEvent) => {
  if (!event.clipboardData) return;

  // 获取选中的文本
  const selectedText = window.getSelection()?.toString() || '';

  // 如果选中的文本来自目标段落，则追加固定内容
  if (contentRef.value?.contains(event.target as Node)) {
    event.preventDefault(); // 阻止默认复制行为
    event.clipboardData.setData('text/plain', selectedText + fixedContent);
  }
};

// 挂载时添加事件监听
onMounted(() => {
  document.addEventListener('copy', handleCopy);
});

// 卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('copy', handleCopy);
});
</script>
```

##### 4. 样式调整
为了让页面看起来更美观，我添加了一些简单的样式：

```vue
<style scoped>
p {
  font-size: 16px;
  line-height: 1.5;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
```

##### 5. 运行效果
完成代码后，我运行了项目，测试了复制功能。当用户复制段落中的文本时，剪贴板中的内容会自动追加固定的作者出处信息。例如，复制 `这是一段示例文本，用户复制时会自动追加作者出处信息。` 后，剪贴板中的内容会变为：

```
这是一段示例文本，用户复制时会自动追加作者出处信息。

作者：某某某
出处：某某网站
```

#### 遇到的问题与解决
1. **事件目标判断**：
   - 最初，我没有判断选中的文本是否来自目标段落，导致所有复制操作都会被修改。通过 `contentRef.value?.contains(event.target as Node)` 解决了这个问题。

2. **剪贴板 API 兼容性**：
   - 某些旧版浏览器可能不支持 `clipboardData` API。为了兼容性，我添加了 `if (!event.clipboardData) return;` 的判断。

3. **事件监听器的管理**：
   - 为了避免内存泄漏，我在 `onUnmounted` 钩子中移除了事件监听器。


通过这次实现，我学到了如何在 Vue 3 中监听和处理浏览器的剪贴板事件，并结合 TypeScript 实现了功能。虽然功能本身并不复杂，但涉及到的细节（如事件目标判断、剪贴板 API 兼容性等）让我对前端开发有了更深的理解。

未来，如果遇到类似的需求，我会考虑将这段逻辑封装成一个可复用的自定义 Hook，以便在项目中更方便地使用。



在 Vue 3 中实现复制内容时追加固定信息



### 引言

在开发基于 GORM（Go 的 ORM 库）的应用程序时，处理多表关联查询是一个常见的需求。通过 `JOIN` 操作，我们可以轻松地将多个表的数据关联起来，并在查询结果中返回所需的详细信息。本文将总结 GORM 中如何使用 `JOIN` 操作，并提供一个通用的模板代码，帮助你快速实现多表关联查询。

---

### 什么是 `JOIN`？

在关系型数据库中，`JOIN` 是一种将两个或多个表的数据组合在一起的操作。通过 `JOIN`，我们可以根据表之间的关联字段（如外键）来获取相关联的数据。常见的 `JOIN` 类型包括：

- **INNER JOIN**：只返回两个表中满足条件的记录。
- **LEFT JOIN**：返回左表中的所有记录，即使右表中没有匹配的记录。
- **RIGHT JOIN**：返回右表中的所有记录，即使左表中没有匹配的记录。
- **FULL JOIN**：返回两个表中的所有记录，无论是否匹配。

在 GORM 中，`JOIN` 操作可以通过 `Joins` 方法来实现。

---

### GORM 中的 `JOIN` 操作

GORM 提供了多种方式来实现 `JOIN` 操作，包括：

1. **`Joins` 方法**：用于显式地指定 `JOIN` 操作。
2. **`Preload` 方法**：用于预加载关联数据，适合简单的关联查询。
3. **`Raw SQL` 查询**：用于直接执行复杂的 SQL 查询。

在本文中，我们将重点讨论如何使用 `Joins` 方法来实现多表关联查询。

---

### 使用 `Joins` 实现多表关联查询

在 GORM 中，`Joins` 方法允许你指定一个 SQL `JOIN` 子句，并将查询结果映射到一个结构体中。以下是一个通用的模板代码，展示了如何使用 `Joins` 方法来实现多表关联查询。

#### 模板代码

```go
package handler

import (
	"app/pkg/db"
	"app/pkg/r"
	"net/http"
	"time"

	"github.com/gin-gonic/gin"
)

// 定义处理程序结构体
type ExampleHandler struct{}

func NewExampleHandler() *ExampleHandler {
	return &ExampleHandler{}
}

// 获取关联数据列表
func (h *ExampleHandler) List(c *gin.Context) {
	db := db.GetDB()

	// 定义查询结果的结构体
	var data []struct {
		ID           uint      `json:"id"`
		FieldName1   string    `json:"field_name_1"` // 字段1
		FieldName2   string    `json:"field_name_2"` // 字段2
		RelatedName  string    `json:"related_name"` // 关联表的字段
		CreatedAt    time.Time `json:"created_at"`
	}

	// 使用 Joins 进行联表查询
	if err := db.Table("main_table").
		Select("main_table.id, main_table.field_name_1, main_table.field_name_2, related_table.name as related_name, main_table.created_at").
		Joins("left join related_table on main_table.related_id = related_table.id").
		Find(&data).Error; err != nil {
		r.Err(c, http.StatusInternalServerError, err.Error())
		return
	}

	// 返回结果
	r.Ok(c, data)
}
```

---

### 模板代码说明

1. **`Table` 方法**：指定主表的名称。
2. **`Select` 方法**：选择需要查询的字段，并可以通过 `as` 重命名字段。
3. **`Joins` 方法**：指定 `JOIN` 子句，将主表与关联表连接起来。
4. **`Find` 方法**：将查询结果映射到 `data` 结构体中。
5. **错误处理**：如果查询出错，返回 `500 Internal Server Error`。
6. **返回结果**：使用 `r.Ok(c, data)` 返回查询结果。

---

### 示例：员工与部门的关联查询

假设我们有一个员工表 `employees` 和一个部门表 `departments`，我们希望查询员工列表，并返回员工的姓名和部门名称。

#### 示例代码

```go
func (h *EmployeeHandler) List(c *gin.Context) {
	db := db.GetDB()

	// 定义查询结果的结构体
	var data []struct {
		ID             uint      `json:"id"`
		Name           string    `json:"name"`
		DepartmentName string    `json:"department_name"` // 部门名称
		Position       string    `json:"position"`
		HireDate       time.Time `json:"hire_date"`
	}

	// 使用 Joins 进行联表查询
	if err := db.Table("employees").
		Select("employees.id, employees.name, departments.name as department_name, employees.position, employees.hire_date").
		Joins("left join departments on employees.department_id = departments.id").
		Find(&data).Error; err != nil {
		r.Err(c, http.StatusInternalServerError, err.Error())
		return
	}

	// 返回结果
	r.Ok(c, data)
}
```

#### 说明

- `employees` 表通过 `department_id` 关联到 `departments` 表。
- 使用 `Joins` 方法将 `employees` 表和 `departments` 表连接起来。
- 使用 `Select` 方法选择需要的字段，并将 `departments.name` 重命名为 `department_name`。

---

### 示例：请假记录与员工的关联查询

假设我们有一个请假记录表 `leave_records` 和一个员工表 `employees`，我们希望查询请假记录列表，并返回请假员工的姓名。

#### 示例代码

```go
func (h *LeaveRecordHandler) List(c *gin.Context) {
	db := db.GetDB()

	// 定义查询结果的结构体
	var data []struct {
		ID           uint      `json:"id"`
		EmployeeName string    `json:"employee_name"` // 员工姓名
		StartDate    time.Time `json:"start_date"`
		EndDate      time.Time `json:"end_date"`
		Type         string    `json:"type"`
		Status       string    `json:"status"`
		Reason       string    `json:"reason"`
	}

	// 使用 Joins 进行联表查询
	if err := db.Table("leave_records").
		Select("leave_records.id, employees.name as employee_name, leave_records.start_date, leave_records.end_date, leave_records.type, leave_records.status, leave_records.reason").
		Joins("left join employees on leave_records.employee_id = employees.id").
		Find(&data).Error; err != nil {
		r.Err(c, http.StatusInternalServerError, err.Error())
		return
	}

	// 返回结果
	r.Ok(c, data)
}
```

#### 说明

- `leave_records` 表通过 `employee_id` 关联到 `employees` 表。
- 使用 `Joins` 方法将 `leave_records` 表和 `employees` 表连接起来。
- 使用 `Select` 方法选择需要的字段，并将 `employees.name` 重命名为 `employee_name`。

---



通过 `Joins` 方法，我们可以轻松地在 GORM 中实现多表关联查询。无论是查询员工与部门的关联，还是查询请假记录与员工的关联，都可以使用类似的模板代码来实现。希望本文的总结和模板代码能够帮助你更好地理解和使用 GORM 中的 `JOIN` 操作。

---

### 参考资料

- [GORM 官方文档](https://gorm.io/docs/)
- [GORM Joins 方法](https://gorm.io/docs/query.html#Joins)



Gorm Joins

# ElementPlus替换全局主题色
App.vue编写样式
```css
<style lang="less">
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}


:root {
    --el-color-primary: @primary-color;
}
</style>

```

管理后台表格禁用滚动条
```css
.el-main {
    overflow: hidden;
}
```

编码记录

## 有监督和无监督区别


### **1. 数据标签的有无**
- **监督学习（Supervised Learning）**：
  - **定义**：监督学习使用带有标签的数据进行训练。标签是数据的“正确答案”，模型通过学习输入数据和对应标签之间的关系，来预测新数据的标签。
  - **例子**：
    - 分类问题：给定一张图片，判断它是猫还是狗（标签是“猫”或“狗”）。
    - 回归问题：给定房屋的面积和位置，预测房价（标签是房价）。
  - **数据形式**：输入数据 $ X $ 和对应的标签 $ y $，即 $ (X, y) $。

- **无监督学习（Unsupervised Learning）**：
  - **定义**：无监督学习使用没有标签的数据进行训练。模型需要从数据中自动发现模式、结构或关系，而不依赖于预先定义的标签。
  - **例子**：
    - 聚类问题：将一组客户数据分成不同的群体（没有预先定义的标签）。
    - 降维问题：将高维数据压缩到低维空间（如PCA）。
  - **数据形式**：只有输入数据 $ X $，没有标签 $ y $。

---

### **2. 学习目标**
- **监督学习**：
  - **目标**：学习输入数据 $ X $ 和标签 $ y $ 之间的映射关系，即 $ f(X) \rightarrow y $。
  - **任务类型**：
    - **分类**：预测离散标签（如猫/狗、垃圾邮件/非垃圾邮件）。
    - **回归**：预测连续值（如房价、温度）。
  - **模型示例**：
    - 线性回归、逻辑回归、支持向量机（SVM）、决策树、随机森林、神经网络。

- **无监督学习**：
  - **目标**：从数据中发现内在的结构、模式或关系。
  - **任务类型**：
    - **聚类**：将数据分成不同的组（如K-means、层次聚类）。
    - **降维**：减少数据的维度，同时保留重要信息（如PCA、t-SNE）。
    - **关联规则学习**：发现数据中的频繁模式（如Apriori算法）。
  - **模型示例**：
    - K-means、层次聚类、主成分分析（PCA）、t-SNE、自编码器。

---

### **3. 训练过程**
- **监督学习**：
  - **训练过程**：
    1. 提供带有标签的训练数据 $ (X, y) $。
    2. 模型学习输入 $ X $ 和标签 $ y $ 之间的关系。
    3. 使用损失函数（如均方误差、交叉熵）衡量模型的预测结果与真实标签的差距。
    4. 通过优化算法（如梯度下降）调整模型参数，使损失最小化。
  - **特点**：
    - 需要大量标注数据。
    - 训练过程依赖于标签的正确性。

- **无监督学习**：
  - **训练过程**：
    1. 提供没有标签的训练数据 $ X $。
    2. 模型尝试从数据中自动发现模式或结构。
    3. 使用目标函数（如聚类误差、降维后的信息损失）衡量模型的效果。
    4. 通过优化算法调整模型参数，使目标函数最优。
  - **特点**：
    - 不需要标注数据，节省了标注成本。
    - 训练过程更依赖于数据的内在结构。

---

### **4. 应用场景**
- **监督学习**：
  - **分类问题**：
    - 垃圾邮件检测（垃圾邮件/非垃圾邮件）。
    - 图像分类（猫/狗/汽车）。
    - 情感分析（正面/负面）。
  - **回归问题**：
    - 房价预测。
    - 股票价格预测。
    - 温度预测。
  - **应用领域**：
    - 金融、医疗、自然语言处理、计算机视觉。

- **无监督学习**：
  - **聚类问题**：
    - 客户细分（根据购买行为将客户分成不同群体）。
    - 社交网络分析（发现社区结构）。
  - **降维问题**：
    - 数据可视化（将高维数据压缩到二维或三维）。
    - 特征提取（减少数据维度，提高计算效率）。
  - **应用领域**：
    - 市场营销、生物信息学、推荐系统。

---

### **5. 优缺点对比**
| **特性**         | **监督学习**                          | **无监督学习**                          |
|------------------|---------------------------------------|-----------------------------------------|
| **数据需求**     | 需要大量标注数据                      | 不需要标注数据                          |
| **训练难度**     | 需要设计标签和损失函数                | 需要设计目标函数和优化方法              |
| **模型复杂度**   | 通常更复杂（需要学习映射关系）        | 相对简单（主要发现数据结构）            |
| **应用场景**     | 分类、回归等预测任务                  | 聚类、降维、模式发现                    |
| **标注成本**     | 高                                    | 低                                      |
| **模型效果**     | 通常效果更好（因为有标签指导）        | 效果依赖于数据结构和模型设计            |

---

### **6. 总结**
- **监督学习**：适用于需要明确预测目标的任务（如分类和回归），但需要大量标注数据。
- **无监督学习**：适用于数据探索和模式发现任务（如聚类和降维），不需要标注数据，但模型的解释性和效果可能较弱。

在实际应用中，监督学习和无监督学习可以结合使用。例如，先用无监督学习对数据进行预处理（如降维或聚类），然后再用监督学习进行预测任务。

## 模型误差评价指标
### 1.二分类预测模型的误差评价指标
二分类任务的目标是将数据分为两个类别（如正类和负类），常见的评价指标包括：

#### **(1) 准确率（Accuracy）**
- **定义**：正确分类的样本数占总样本数的比例。
- **公式**：
  \[
  \text{Accuracy} = \frac{\text{正确分类的样本数}}{\text{总样本数}}
  \]
- **特点**：
  - 简单直观，适用于类别分布均衡的场景。
  - 在类别不平衡时，可能无法准确反映模型性能。

#### **(2) 精确率（Precision）**
- **定义**：预测为正类的样本中，实际为正类的比例。
- **公式**：
  \[
  \text{Precision} = \frac{\text{真正类（TP）}}{\text{预测为正类的样本数（TP + FP）}}
  \]
- **特点**：
  - 关注模型预测的“精确性”。
  - 适用于需要减少误报（FP）的场景，如垃圾邮件检测。

#### **(3) 召回率（Recall）**
- **定义**：实际为正类的样本中，被正确预测为正类的比例。
- **公式**：
  \[
  \text{Recall} = \frac{\text{真正类（TP）}}{\text{实际为正类的样本数（TP + FN）}}
  \]
- **特点**：
  - 关注模型预测的“全面性”。
  - 适用于需要减少漏报（FN）的场景，如疾病检测。

#### **(4) F1分数（F1 Score）**
- **定义**：精确率和召回率的调和平均值。
- **公式**：
  \[
  \text{F1 Score} = 2 \cdot \frac{\text{Precision} \cdot \text{Recall}}{\text{Precision} + \text{Recall}}
  \]
- **特点**：
  - 综合考虑精确率和召回率。
  - 适用于类别不平衡且需要平衡精确性和召回率的场景。

#### **(5) ROC曲线与AUC**
- **ROC曲线（Receiver Operating Characteristic Curve）**：
  - 横轴为假正类率（FPR），纵轴为真正类率（TPR）。
  - 曲线越靠近左上角，模型性能越好。
- **AUC（Area Under Curve）**：
  - ROC曲线下的面积，范围为0到1。
  - AUC越大，模型性能越好。
- **特点**：
  - 适用于二分类问题。
  - 对类别不平衡不敏感。

#### **(6) 混淆矩阵（Confusion Matrix）**
- **定义**：展示模型预测结果与真实标签的对比。
- **结构**：
  |                | 预测正类 | 预测负类 |
  |----------------|----------|----------|
  | **实际正类**   | TP       | FN       |
  | **实际负类**   | FP       | TN       |
- **特点**：
  - 用于计算精确率、召回率等指标。
  - 直观展示模型的分类效果。

---

### **2. 回归预测模型的误差评价指标**
回归任务的目标是预测连续值，常见的评价指标包括：

#### **(1) 均方误差（Mean Squared Error, MSE）**
- **定义**：预测值与真实值之间差的平方的平均值。
- **公式**：
  \[
  \text{MSE} = \frac{1}{n} \sum_{i=1}^n (y_i - \hat{y}_i)^2
  \]
- **特点**：
  - 对大误差敏感，惩罚较大误差。
  - 值越小，模型性能越好。

#### **(2) 均方根误差（Root Mean Squared Error, RMSE）**
- **定义**：MSE的平方根。
- **公式**：
  \[
  \text{RMSE} = \sqrt{\text{MSE}}
  \]
- **特点**：
  - 与原始数据的单位一致，便于解释。
  - 值越小，模型性能越好。

#### **(3) 平均绝对误差（Mean Absolute Error, MAE）**
- **定义**：预测值与真实值之间差的绝对值的平均值。
- **公式**：
  \[
  \text{MAE} = \frac{1}{n} \sum_{i=1}^n |y_i - \hat{y}_i|
  \]
- **特点**：
  - 对异常值不敏感。
  - 值越小，模型性能越好。

#### **(4) R²（R-squared）**
- **定义**：模型解释的方差占总方差的比例。
- **公式**：
  \[
  R^2 = 1 - \frac{\sum_{i=1}^n (y_i - \hat{y}_i)^2}{\sum_{i=1}^n (y_i - \bar{y})^2}
  \]
- **特点**：
  - 范围为0到1，值越大，模型性能越好。
  - 表示模型的拟合优度。

---

### **3. 总结**
| **任务类型** | **常用指标**                          | **适用场景**                          |
|--------------|---------------------------------------|---------------------------------------|
| **二分类**   | 准确率、精确率、召回率、F1分数、ROC-AUC | 类别预测、不平衡数据                  |
| **回归**     | MSE、RMSE、MAE、R²                    | 连续值预测、异常值处理                |

选择合适的评价指标需要根据具体任务和业务需求。例如：
- 在二分类任务中，如果类别不平衡，优先考虑精确率、召回率或F1分数。
- 在回归任务中，如果数据存在异常值，优先考虑MAE。

通过合理选择评价指标，可以更准确地评估模型的性能，并指导模型的优化和改进。

机器学习期末复习

最近在学习ts，以前写的都是js，本身也是后端出身，所以尝试一下TS，新开个vue3项目，寒假在写一个React项目

记录一下过程

### 2024-12-22 编码记录



---

### 1. 路由配置问题

#### 问题描述
在配置 Vue Router 时，设置了根路径 `/` 自动跳转到 `/login`，但页面并未自动跳转。

#### 解决方法
1. **路由名称重复**：
   - 发现 `/` 和 `/hello` 路由的 `name` 都设置为 `Home`，导致路由系统无法正确识别。
   - 修改 `/` 路由的 `name` 为 `Root`，`/hello` 路由的 `name` 为 `Hello`。

2. **路由顺序问题**：
   - 确保 `/` 路由在路由配置的最前面，避免被其他路由覆盖。

3. **检查 `App.vue` 中的 `<router-view>`**：
   - 确保在 `App.vue` 中正确使用了 `<router-view>`，以便路由组件能够正确渲染。

#### 最终代码
```typescript
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Root',
    redirect: '/login',
  },
  {
    path: '/hello',
    name: 'Hello',
    component: () => import('../views/Hello.vue'),
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
  }
];
```

---

### 2. Element Plus 集成问题

#### 问题描述
在 Vue 3 + Vite 项目中集成 Element Plus 时，遇到了样式文件无法加载的问题。

#### 解决方法
1. **安装 Element Plus**：
   - 运行以下命令安装 Element Plus：
     ```bash
     npm install element-plus --save
     ```

2. **配置按需引入**：
   - 使用 `vite-plugin-style-import` 插件实现按需引入 Element Plus 的样式。
   - 安装插件：
     ```bash
     npm install vite-plugin-style-import --save-dev
     ```
   - 在 `vite.config.ts` 中配置插件：
     ```typescript
     import { defineConfig } from 'vite';
     import vue from '@vitejs/plugin-vue';
     import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import';

     export default defineConfig({
       plugins: [
         vue(),
         createStyleImportPlugin({
           resolves: [ElementPlusResolve()],
           libs: [
             {
               libraryName: 'element-plus',
               esModule: true,
               resolveStyle: (name) => {
                 return `element-plus/es/components/${name}/style/css`;
               },
             },
           ],
         }),
       ],
     });
     ```

3. **检查文件路径**：
   - 确保 `node_modules/element-plus/es/components/el-button/style/css` 文件存在。
   - 如果文件不存在，尝试重新安装 Element Plus。

4. **使用 `unplugin-vue-components` 插件**：
   - 安装插件：
     ```bash
     npm install unplugin-vue-components --save-dev
     ```
   - 在 `vite.config.ts` 中配置插件：
     ```typescript
     import { defineConfig } from 'vite';
     import vue from '@vitejs/plugin-vue';
     import Components from 'unplugin-vue-components/vite';
     import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

     export default defineConfig({
       plugins: [
         vue(),
         Components({
           resolvers: [ElementPlusResolver()],
         }),
       ],
     });
     ```

---

### 3. Vite 插件依赖问题

#### 问题描述
在配置 `vite-plugin-style-import` 插件时，遇到了 `consola` 包未找到的错误。

#### 解决方法
1. **安装 `consola`**：
   - 运行以下命令安装 `consola`：
     ```bash
     npm install consola --save-dev
     ```

2. **重新启动 Vite 开发服务器**：
   - 安装完成后，重新启动 Vite 开发服务器：
     ```bash
     npm run dev
     ```

---

### 4. TypeScript 配置文件缺失问题

#### 问题描述
Vite 在解析项目时尝试读取 `tsconfig.node.json` 文件，但该文件不存在。

#### 解决方法
1. **创建 `tsconfig.node.json` 文件**：
   - 在项目根目录下创建 `tsconfig.node.json` 文件，内容如下：
     ```json
     {
       "compilerOptions": {
         "module": "ESNext",
         "moduleResolution": "Node",
         "strict": true,
         "esModuleInterop": true,
         "skipLibCheck": true,
         "forceConsistentCasingInFileNames": true
       },
       "include": ["vite.config.ts"]
     }
     ```

2. **检查 `tsconfig.json`**：
   - 如果项目中已有 `tsconfig.json`，可以将其配置扩展到 `tsconfig.node.json`：
     ```json
     {
       "extends": "./tsconfig.json",
       "compilerOptions": {
         "module": "ESNext",
         "moduleResolution": "Node",
         "skipLibCheck": true
       },
       "include": ["vite.config.ts"]
     }
     ```

---

