Vite React 프로젝트 path alias 설정하기

Vite를 이용해 React와 TypeScript를 기반으로 한 프로젝트 환경에서 path alias 설정하는 방법

 

🔶 vite-tsconfig-paths 설치 & 플러그인 추가

yarn add -D vite-tsconfig-paths

 

vite.config.ts 파일에 tsconfigPaths 플러그인 추가하기

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

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

 

🔶  tsconfig 파일에 alias 추가

    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"]
    }