Vite 配置路径别名的流程

一、依赖安装

pnpm i @types/node -D

二、vite.config.ts

2.1、第一种配置

// path 模块提供了一些工具函数，用于处理文件与目录的路径
import { resolve } from 'path'
// 使用 defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示
import { defineConfig } from 'vite'

/** 当前执行 node 命令时文件夹的地址（工作目录） */
const root: string = process.cwd()

/** 路径拼接函数，简化代码 */
const pathResolve = (path: string): string => resolve(root, path)

export default defineConfig({
  resolve: {
    alias: [
      /** 设置 `@` 指向 `src` 目录 */
      { find: '@', replacement: pathResolve('src') },
      /** 设置 `#` 指向 `types` 目录 */
      { find: '#', replacement: pathResolve('types') },
    ],
  },
})

2.2、第二种配置

// 用于处理和解析 URL 的模块
import { fileURLToPath, URL } from 'node:url'
// 使用 defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      /** 设置 `@` 指向 `src` 目录 */
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      /** 设置 `#` 指向 `types` 目录 */
      '#': fileURLToPath(new URL('./types', import.meta.url)),
    },
  },
})

三、tsconfig.json

{
  "compilerOptions": {
    // 解析非相对模块名的基准目录
    "baseUrl": "./",
    // 模块名到基于 baseUrl 的路径映射的列表
    "paths": {
      "@/*": ["src/*"],
      "#/*": ["types/*"]
    }
  }
}