配置文件系统路径别名

为了在项目中方便地引用模块和组件，我们可以配置路径别名。这允许我们使用简短的别名而不是相对路径或绝对路径。以下是如何在 Vite 和 TypeScript 配置文件中设置别名的步骤：

Vite 配置 (vite.config.ts)

在 Vite 的配置文件中，我们定义了两个别名：@ 指向 src 目录，@components 指向 src/components 目录。

Vite 在构建（或开发服务器启动）时使用这些别名。这意味着它们影响的是最终打包的代码，以及在开发服务器中代码的实时重载。

import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)), 
      '@components': fileURLToPath(new URL('./src/components', import.meta.url)), 
    },
  },
})

TypeScript 配置 (tsconfig.json)

在 TypeScript 的配置文件中，我们设置了 baseUrl 和 paths 来定义模块解析的路径别名。

TypeScript 在编译时使用这些别名。这意味着它们主要用于类型检查和编译 TypeScript 代码到 JavaScript，而不直接影响最终打包的代码。

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

通过这种方式配置别名，我们可以在项目中使用 @ 来引用 src 目录下的任何文件，使用 @components 来引用 src/components 目录下的组件。这不仅简化了路径引用，还提高了代码的可读性和可维护性。