使用Vite路径别名导入TS文件时出现报错问题求助

你遇到的问题是Vite的别名配置仅在构建阶段生效，但TypeScript类型检查器未识别该别名，所以.vue文件因Vite插件处理正常，而.ts文件会触发TS模块找不到的错误。

解决步骤： #

1. 优化Vite别名配置（可选，提升跨平台兼容性） #

调整Vite配置里的别名写法，避免Windows环境下的路径问题：

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

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

2. 同步配置TypeScript路径映射 #

在项目根目录的tsconfig.json（或jsconfig.json）中添加baseUrl和paths配置，让TS识别@别名：

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

3. 重启TypeScript服务（关键步骤） #

配置完成后，在VS Code中按下Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server，让新配置生效。

完成以上操作后，TS就能正确识别@别名导入的.ts文件，报错会自动消失。

内容的提问来源于stack exchange，提问作者GianPierre Gálvez