前言

在前端开发中，路径别名的使用可以让项目代码更加清晰易读，避免深层级的相对路径引用问题。本文将以 Vite+Ts和Vite+Js两种项目为例，介绍如何在项目中配置路径别名。

为什么使用路径别名？

提升可读性：相比 ../../../components/Button，@/components/Button 更简洁直观。

便于维护：项目结构变化时，只需调整别名配置，无需修改大量文件路径。

防止路径混乱：避免因相对路径层级较深导致的引用错误。

配置路径别名步骤

vite + ts 配置

业界常用将@映射到src目录。vite中resolve.alias用于在开发和构建过程中定义路径别名，以便更方便地引用模块。官方文档传送门🚪。同时，为了让TS编译器识别路径别名，还需要修改 tsconfig.app.json 文件。

vite.config.ts

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

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

tsconfig.app.json

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

vite + js 配置

vite.config.ts

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

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

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",  // 设置相对路径的根目录
    "paths": {
      "@/*": ["src/*"]  // 将 '@' 映射到 'src' 目录
    }
  },
  "include": [
    "src/**/*"  // 包括 'src' 目录下的所有文件
  ]
}