Vite + 절대경로 설정

상대경로와 절대경로의 차이

상대경로

• ../components (현재 디렉토리에서 상위 디렉토리로 이동한 다음 components 디렉토리로 이동)
• 현재 파일의 위치에 따라 달라짐

절대경로

• @components (프로젝트 루트 디렉토리에서 components 디렉토리)
• 파일의 위치와 무관하게 항상 동일한 경로를 나타내므로 모듈이나 파일을 이동하거나 다시 구성할 때 유용

Vite에서 절대경로 설정하기

• vite.config.js 파일에서 설정

import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  ...
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
  },
});

• resolve.alias 설정
  • 모듈 경로를 바꾸는 데 사용
  • find : 원래 경로를 찾을 문자열
  • replacement : 그 문자열을 어떤 경로로 대체할 것인지를 나타냄