React+TS+Vite项目中配置src绝对导入需调整哪些配置文件？

要实现import x from 'src/components/x'这类从src目录起始的绝对导入，需要修改两个核心配置文件，解决模块解析错误问题：

1. 修改Vite配置文件 vite.config.ts #

在配置中添加路径别名映射，让Vite能够识别src开头的导入路径：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'src': path.resolve(__dirname, './src')
    }
  }
})

如果TypeScript提示path模块不存在，执行以下命令安装类型声明：

npm install @types/node --save-dev

2. 修改TypeScript配置文件 tsconfig.json #

配置TypeScript的路径解析规则，确保编辑器和TS编译器能正确识别src路径：

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

配置完成后，重启Vite开发服务器，即可正常使用src/xxx格式的绝对导入，不会再出现模块解析失败的错误。

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