Vite + TypeScript Path Alias: настраиваем @/utils в 3 шага

Как прописать alias @ в tsconfig.json и vite.config.js, чтобы импортировать модули без относительных путей. Полный рабочий пример за 2 минуты.

**Как это работает**
vite-tsconfig-paths автоматически подтягивает секцию paths, а ручной alias гарантирует, что статичные ресурсы тоже резолвятся. После перезапуска Vite IDE распознаёт импорты без относительных «../../».
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]          // 👉 теперь `@/utils/math`
    }
  }
}


// vite.config.js
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [tsconfigPaths()],   // плагин читает paths из tsconfig
  resolve: {
    alias: {
      '@': '/src',              // нужен для non-TS файлов (CSS, Vue SFC и т.д.)
    }
  }
});


// пример использования
import { sum } from '@/utils/math';
console.log(sum(2, 3));