从CRA迁移到Vite+TS后绝对路径导入解析失败求助

我正在将项目从JavaScript迁移到TypeScript，同时从Create React App（CRA）迁移到Vite。完成JS到TS的迁移后，执行npm run start启动本地项目时出现以下错误：

Failed to resolve import "components/Card/Card" from "src\App.tsx"

TS文件（.tsx/.ts）内部可以正常解析绝对路径导入，但Vite无法识别所有类似import Card from 'components/Card/Card';的绝对路径导入语句。改为相对路径./components/Card/Card可以解决问题，但我需要保留绝对路径导入的方式。我已经尝试调整tsconfig的baseUrl、lib、include以及vite.config.ts的相关配置，但问题仍未解决。

相关配置文件 #

tsconfig.json #

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "*": ["src/*"],
      },
      "outDir": "./",
      "jsx": "react-jsx",
      "sourceMap": true,
      "allowJs": true,
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "target": "ESNext",      
      "types": ["vite/client", "vite-plugin-svgr/client", "node"],
      "module": "esnext",
      "moduleResolution": "node",
      "esModuleInterop": true,
      "resolveJsonModule": true,
      "allowSyntheticDefaultImports": true,
      "forceConsistentCasingInFileNames": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
    },
    "lib": [
      "dom", 
      "dom.iterable", 
      "es5"
    ],
    "typeRoots": [
      "node_modules/@types",
      "types/"
    ],
    "include": [
      "src",
      "types"
    ],
    "exclude": [
      "node_modules",
      "dist"
    ]
}

vite.config.ts #

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [react(), tsconfigPaths(), svgrPlugin()], 
  build: {
    outDir: 'build',
  },
  server: {
    port: 3000,
    open: false,
  },
});

vite-env.d.ts #

/// <reference types="vite/client" />

package.json #

{
  "name": "memory-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^29.2.6",
    "@types/node": "^18.11.18",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "styled-components": "^5.3.5",
    "typescript": "^4.9.4",
    "use-sound": "^4.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.0.1",
    "vite": "^4.0.4",
    "vite-plugin-svgr": "^2.4.0",
    "vite-tsconfig-paths": "^4.0.5"
  }
}

项目目录结构 #

项目根目录下包含src文件夹，src内有App.tsx及components文件夹；components目录下有Card文件夹，其中包含Card.tsx等组件文件。

解决方法 #

1. 优化tsconfig的paths配置 #

当前paths中的"*": ["src/*"]匹配范围过宽，可能导致路径解析冲突。建议改为更精准的配置，比如：

"paths": {
  "components/*": ["src/components/*"],
  "hooks/*": ["src/hooks/*"],
  "utils/*": ["src/utils/*"]
}

如果希望保留全局匹配，确保"*": ["src/*"]配置正确，且没有其他配置干扰。

2. 显式指定tsconfig文件路径给vite-tsconfig-paths插件 #

修改vite.config.ts，显式指定tsconfig的路径，确保插件正确读取配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths({ projects: ['./tsconfig.json'] }),
    svgrPlugin()
  ],
  build: { outDir: 'build' },
  server: { port: 3000, open: false }
});

3. 清除Vite缓存并重启项目 #

删除node_modules/.vite缓存目录，或直接重启终端后执行npm run start，避免缓存导致配置未生效。

4. 检查文件路径大小写 #

Vite严格区分文件路径大小写，而CRA可能不敏感。确保导入路径中的文件名、目录名和实际文件系统中的完全一致。

5. 验证baseUrl配置 #

确认tsconfig.json中的baseUrl设置为.（项目根目录），确保src目录在baseUrl的覆盖范围内。

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