Vite+React中无需src前缀的组件/页面绝对路径配置方法

要实现直接用components/Main/Main或pages/Home/Home这类路径导入组件/页面，只需完成以下几步配置：

1. 配置Vite核心文件 #

打开项目根目录下的vite.config.js（或vite.config.ts），修改resolve选项，将src目录加入模块解析的根目录列表：

JavaScript项目版本： #

const path = require('path');
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
});

TypeScript项目版本： #

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
});

注：TS项目若未安装@types/node，需先执行npm install @types/node --save-dev。

2. 配置TypeScript类型解析（TS项目必做） #

打开tsconfig.json，修改compilerOptions中的baseUrl和paths，让TypeScript能正确识别路径：

{
  "compilerOptions": {
    // 保留原有其他配置...
    "baseUrl": "./src",
    "paths": {
      "*": ["*"]
    }
  }
}

3. 修复ESLint路径解析错误（可选，若项目使用ESLint） #

如果ESLint提示路径无法解析，先安装依赖：

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

然后修改.eslintrc.js的settings：

module.exports = {
  // 保留原有其他配置...
  settings: {
    'import/resolver': {
      node: {
        moduleDirectory: ['src', 'node_modules']
      }
    }
  }
};

TS项目建议使用TypeScript专属解析器，先安装：

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

再修改ESLint配置：

module.exports = {
  // 保留原有其他配置...
  settings: {
    'import/resolver': {
      typescript: {
        project: './tsconfig.json'
      }
    }
  }
};

最后一步：重启Vite开发服务器 #

所有配置完成后，必须重启Vite才能让配置生效。之后你就可以直接用import { Header } from 'components/Header/Header'这类路径导入，无需再写src/前缀。

内容的提问来源于stack exchange，提问作者Богдан Гапоненко