如何在Vite React中设置别名以缩短相对导入路径？

1. 修改Vite核心配置文件 #

在项目根目录的vite.config.js或vite.config.ts中，通过resolve.alias字段定义你需要的路径别名，比如将@src指向项目根目录下的src文件夹，@components指向src/components等：

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@src': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@pages': path.resolve(__dirname, './src/pages'),
      '@utils': path.resolve(__dirname, './src/utils')
    }
  }
})

2. 配置TypeScript类型提示（TS项目必备） #

如果你的项目使用TypeScript，需要修改tsconfig.json中的compilerOptions.paths字段，让TypeScript编译器识别这些别名，避免出现类型报错：

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

3. ESLint兼容配置（按需配置） #

如果项目使用ESLint，需要额外配置导入解析器，避免ESLint识别不了别名而报错。首先安装依赖：

npm install eslint-import-resolver-alias --save-dev

然后修改.eslintrc.js：

module.exports = {
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@src', './src'],
          ['@components', './src/components'],
          ['@pages', './src/pages'],
          ['@utils', './src/utils']
        ],
        extensions: ['.js', '.jsx', '.ts', '.tsx']
      }
    }
  }
}

配置完成后，你就可以直接使用别名进行导入，比如：

import counterReducer from "@src/pages/counter/counter.slice";

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