如何在Vite+React中简化组件及模块的导入路径？

直接通过配置路径别名就能解决这个问题，把冗长的../../../替换成简洁的别名，步骤如下：

1. 配置Vite的路径别名 #

在项目根目录的vite.config.js（或vite.config.ts）中，添加resolve.alias配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // 把根目录映射为@，可按需调整别名
      '@': path.resolve(__dirname, './'),
      // 也可以给特定文件夹单独设置别名
      '@components': path.resolve(__dirname, './components'),
      '@constants': path.resolve(__dirname, './constants'),
    },
  },
})

2. TypeScript项目额外配置（JS项目可跳过） #

如果你的项目用TypeScript，需要修改tsconfig.json的compilerOptions，让TS识别这些别名：

{
  "compilerOptions": {
    // 保留原有配置，新增以下内容
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "@components/*": ["./components/*"],
      "@constants/*": ["./constants/*"]
    }
  }
}

3. 简化导入写法 #

配置完成后，重启Vite开发服务器，你就可以用别名替代冗长的相对路径了：
原来的导入：

import { ON_BOARDING_STEPS } from '../../../constants/itemTypes'

可以改成：

// 用根目录别名@
import { ON_BOARDING_STEPS } from '@/constants/itemTypes'
// 或者用单独的常量文件夹别名
import { ON_BOARDING_STEPS } from '@constants/itemTypes'

这样不仅可读性大大提升，后续调整项目结构时，也不用批量修改导入路径的层级了。

内容的提问来源于stack exchange，提问作者letters