vite 에서 절대경로 설정하기

프로젝트를 진행하다 보면, 다음과 같이 경로가 점점 깊어지는 현상을 다들 경험해 봤을 거라고 생각합니다.

import { useMobile } from "../../utils/useMobile";

첫 이미지 처럼 깔끔하게 import 하기 위해서 어떻게 하는지 알아봅시다!

step1

vite.config.ts :

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@components", replacement: "/src/components" },
      { find: "@", replacement: "/src" },
    ],
  },
});

alias 에 배열로, 찾을 경로와 바꿀 경로를 써줍니다. @components 가 /src/components 로 변경될 것 입니다.

step2

tsconfig.json :

{
  "compilerOptions": {
    ...{options},
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@/*": ["src/*"]
    }
  },
  "include": ["src", "**/*.ts", "**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

paths 와 baseUrl 부분이 중요합니다. baseUrl 은 말그대로 baseUrl 의 의미를 가지며, 위와 같은 경우엔 src/components/ 는 ./src/components/ 와 같은 의미가 됩니다.