[Vite] Vite에서 경로 별칭 설정하는 법

관련 링크

npm: vite-tsconfig-paths

설명

• Vite로 생성한 프로젝트에서 vite-tsconfig-paths를 이용하여 절대 경로를 다루는 방법

사용법

1. 자신이 사용하는 패키지 매니저에 맞게 vite-tsconfig-paths를 설치해준다.

# npm
npm i vite-tsconfig-paths

1. vite.config.ts 에서 해당 플러그인을 추가해준다

//vite.config.ts

import tsconfigPaths from "vite-tsconfig-paths";

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

1. tsconfig.json 에서 경로 별칭을 추가한다.

{
  "compilerOptions": {
    /* path alias */
    "baseUrl": "./src",
    "paths": {
      "@hooks/*": ["hooks/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"],
      "@utils/*": ["utils/*"],
      "@typings/*": ["typings/*"],
      "@styles/*": ["styles/*"],
      "@svg/*": ["assets/svg/*"],
      "@img/*": ["assets/img/*"],
      "@assets/*": ["assets/*"]
    },
  },
}