React Vite中绝对导入失效：无法从src目录导入模块问题

问题情况 #

在React Vite项目里用绝对导入从src文件夹引入模块时失败，报错信息：

Failed to resolve import "redux/1space/letter/inboxSlice" from "src/pages/letter/index.jsx". Does the file exist? /

对应的导入代码：

import { loadInboxs } from "redux/1space/letter/inboxSlice";

当前配置文件 #

Vite配置（vite.config.js） #

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import jsconfigPaths from 'vite-jsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';
import path from "path";

export default defineConfig({
  plugins: [react(), jsconfigPaths(), svgrPlugin()],
  build: {
    outDir: 'build',
  },
  server: {
    open: true,
    port: 3000
  },
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },
  esbuild: {
    loader: "jsx",
    include: /.\/src\/.*\.js?$/,
    exclude: [],
    jsx: "automatic",
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  }, 
})

jsconfig.json配置 #

{
    "compilerOptions": {
        "baseUrl": "src",
        "target": "ESNext",
        "lib": ["dom", "dom.iterable", "esnext"],
        "types": ["vite/client", "vite-plugin-svgr/client"],
    },
    "include": ["src","src/.js"]
  }

修复方案 #

你的配置有两处关键问题，调整后就能解决绝对导入失效的问题：

• 修正Vite别名配置
  当前别名用的是~，但你的导入语句直接基于src根目录写redux/...，需要把别名改成更通用的@，同时确保路径映射正确。修改Vite配置里的resolve.alias：

resolve: {
  alias: {
    '@': path.resolve(__dirname, './src'),
  },
},

• 修正jsconfig.json配置
  1. baseUrl改成.（相对于配置文件的路径，设置为.才能正确映射src目录）
  2. 添加paths字段明确绝对路径的映射规则，同时修正include的范围
     修改后的jsconfig.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["vite/client", "vite-plugin-svgr/client"],
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"]
}

• 调整导入语句（可选）
  如果用@别名，导入代码改成：

import { loadInboxs } from "@/redux/1space/letter/inboxSlice";

另外要额外检查：src/redux/1space/letter/inboxSlice.js（或.jsx）文件是否真实存在，文件名大小写是否和导入语句完全匹配（区分大小写的系统里必须严格一致）。

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