vite + ts 프로젝트에서 baseUrl 옵션 설정방법

상황

• vite + ts 프로젝트에서 baseUrl 설정시 오류가 발생했다.
• tsconfig.json 컴파일러 옵션에 "baseUrl": "./src" 을 추가하여 import문을 간략하게 하고 싶었으나, 파일을 읽지 못하겠다는 에러 메시지가 나왔다.

해결

• vite 프로젝트에서는 ts의 baseUrl 및 path 설정을 읽어 오기 위해 별도의 플러그인이 필요했다.
• npm install vite-tsconfig-paths --save-dev
• vite.config.js 파일에 플러그인 추가

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()], // tsconfigPaths 추가
})