Vite React-TS项目中绝对路径导入失效该如何解决

你遇到的问题本质是仅配置了TypeScript的路径识别规则，没有同步配置Vite的构建路径映射规则，二者需要同时配置才能让绝对路径导入生效。

步骤1：安装依赖 #

首先安装@types/node，避免Vite配置文件中使用Node核心模块时出现类型报错：

npm install @types/node -D

步骤2：配置Vite路径映射 #

打开项目根目录下的vite.config.ts，添加resolve.alias配置：

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

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

这里用@作为src目录的别名，避免导入路径和第三方npm包名冲突。

步骤3：配置TypeScript路径识别 #

打开项目根目录下的tsconfig.json，在compilerOptions中新增如下配置：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    // 其余原有配置保持不变即可
  }
}

最终使用方式 #

配置完成后，你就可以通过带@前缀的绝对路径导入任意src下的模块：

import Test from "@/components/Test";

如果你需要使用不带前缀的components/Test格式导入，只需在vite.config.ts的alias中单独为对应目录配置映射即可（例：'components': path.resolve(__dirname, './src/components')），但该方式需要为每个一级目录单独配置，且存在和第三方包名冲突的风险，不推荐使用。

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