如何在Vite React项目中正确配置并使用路径别名？

你的配置存在两处核心问题，导致别名无法正常工作，以下是修正步骤：

1. 清理无效配置 #

Vite 不会读取 package.json 中 vite 字段下的 baseUrl 和 paths 配置，直接删除这部分冗余内容：

修改后的 package.json：

{
  "name": "mern-wp-lms",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 5",
    "preview": "vite preview"
  },
  "dependencies": {
    // existing dependencies
  },
  "devDependencies": {
    // existing devDependencies
  }
}

2. 修正 Vite 别名配置 #

vite.config.js 中的别名配置需要确保路径指向正确，同时可以简化写法：

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

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ["js-big-decimal"],
  },
  server: {
    port: 8000,
  },
  resolve: {
    alias: {
      // 保留你原本的别名写法，或者改用更规范的@前缀
      "components": path.resolve("./src/components"),
      // 如果需要支持子目录通配，可写成："components/*": path.resolve("./src/components/*")
    },
  },
});

3. 添加 IDE 识别配置 #

项目根目录新建 jsconfig.json，让 VSCode 等 IDE 识别别名，避免导入时出现红色报错：

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

使用方式 #

配置完成后，重启 Vite 开发服务器，即可正常使用别名导入：

import Header from "components/Header";

额外说明（可选） #

如果你的项目使用 ESLint，需要添加别名解析配置避免 ESLint 报错：

1. 安装依赖：npm i eslint-import-resolver-alias -D
2. 在 .eslintrc.js 中添加：

module.exports = {
  // ...其他配置
  settings: {
    'import/resolver': {
      alias: {
        map: [["components", "./src/components"]],
        extensions: [".js", ".jsx"]
      }
    }
  }
}

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