vite-tsconfig-paths 项目教程

1. 项目的目录结构及介绍

vite-tsconfig-paths 项目的目录结构如下：

vite-tsconfig-paths/
├── src/
│   ├── index.ts
│   └── ...
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

目录结构介绍

• src/: 包含项目的主要源代码文件。
  • index.ts: 项目的入口文件。
• package.json: 项目的依赖管理文件，包含项目的依赖包和脚本命令。
• tsconfig.json: TypeScript 的配置文件，用于配置 TypeScript 编译选项。
• vite.config.ts: Vite 的配置文件，用于配置 Vite 构建选项。
• README.md: 项目的说明文档，包含项目的基本介绍和使用说明。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，它是项目的入口文件，负责初始化项目和启动应用。

// src/index.ts
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [tsconfigPaths()]
});

启动文件介绍

• defineConfig: 来自 vite 模块的函数，用于定义 Vite 配置。
• tsconfigPaths: 来自 vite-tsconfig-paths 模块的插件，用于解析 TypeScript 路径别名。

3. 项目的配置文件介绍

tsconfig.json

tsconfig.json 文件用于配置 TypeScript 编译选项，例如路径别名和编译目标。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

vite.config.ts

vite.config.ts 文件用于配置 Vite 构建选项，例如插件和别名。

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  },
  plugins: [tsconfigPaths()]
});

配置文件介绍

• tsconfig.json: 配置 TypeScript 编译选项，包括路径别名。
• vite.config.ts: 配置 Vite 构建选项，包括路径别名和插件。

通过以上配置，项目可以正确解析 TypeScript 路径别名，并使用 Vite 进行构建和开发。