如何在Vite项目中配置使用TypeScript路径别名？解决导入解析失败问题

1. 修正TypeScript配置（tsconfig.json） #

你的tsconfig.json配置可能和项目结构不匹配，先调整为符合项目根目录的设置：

{
  "compilerOptions": {
    "baseUrl": "./", // 以项目根目录为基准路径
    "paths": {
      "@/*": ["src/*"] // 让 @/* 映射到 src 文件夹下的所有文件
    }
  },
  "include": ["src/**/*"] // 确保TypeScript能识别src下的所有文件
}

如果你的tsconfig.json放在src文件夹内部，将baseUrl设为"../"，paths保持上述配置即可，这样@/xxx会指向项目根目录下的src/xxx。

2. 配置Vite的别名解析 #

Vite不会自动读取tsconfig.json的paths规则，必须手动在配置文件里添加别名映射，让打包工具识别：

import { defineConfig } from 'vite'
import path from 'path'

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

若使用JavaScript版配置文件，改用CommonJS语法：

const { defineConfig } = require('vite')
const path = require('path')

module.exports = defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

3. 验证文件结构与导入路径 #

确保@/shared/types对应的实际文件存在：

• 项目结构示例：

你的项目根目录/
├── src/
│   ├── shared/
│   │   └── types/
│   │       └── index.ts // 在该文件中导出需要的类型
│   └── ...
├── vite.config.ts
└── tsconfig.json

• 导入时直接写：import { 你的类型名 } from '@/shared/types'（前提是types文件夹下有index.ts），若为单独文件则需写完整路径：@/shared/types.ts。

4. 重启开发服务器 #

修改配置后必须重启Vite开发服务器，新的别名配置才能生效。

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