Vite에서 tsconfig paths로 import alias 설정하기

vite-tsconfig-paths 플러그인을 쓰면 tsconfig.json의 paths를 Vite가 그대로 읽어서, alias를 두 군데에 중복으로 적지 않아도 된다.

1. 패키지 설치

npm install -D vite-tsconfig-paths

2. vite.config.ts

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

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

3. tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@assets/*": ["assets/*"],
      "@components/*": ["components/*"],
      "@fonts/*": ["fonts/*"],
      "@hooks/*": ["hooks/*"],
      "@pages/*": ["pages/*"],
      "@routes/*": ["routes/*"],
      "@styles/*": ["styles/*"],
      "@types/*": ["types/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

이제 import Button from '@components/Button'처럼 쓸 수 있다.