Vite中TypeScript路径别名@/*失效问题求助

步骤1：创建Vite配置文件 #

由于bun create vite的vanilla-ts模板默认不生成vite.config文件，需手动在项目根目录创建vite.config.ts，配置Vite层面的路径映射：

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

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

该配置会让Vite打包时将@映射到项目根目录下的src文件夹，与tsconfig的规则对齐。

步骤2：补充Vite类型声明（可选） #

若项目中无src/vite-env.d.ts，可创建该文件避免Vite相关类型报错：

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

步骤3：验证配置 #

现在可以在代码中使用别名导入模块，示例：

// 原写法
import { formatDate } from './src/utils/date'
// 别名写法
import { formatDate } from '@/utils/date'

重启Vite开发服务器后，TypeScript语法检查与Vite打包都会正确识别该别名。

核心原因说明 #

• tsconfig.json的paths仅作用于TypeScript语言服务（如VSCode的代码提示、语法检查），负责静态路径校验；
• Vite作为打包工具，不会自动读取tsconfig的paths规则，必须单独配置resolve.alias才能在打包阶段完成路径替换。

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