[Vite+TS] alias 설정하기

1. vite.config.ts 파일을 수정하여 경로 별칭(alias)를 설정해주자!

내가 통상적으로 쓰는 파일 구조로 alias를 설정

아래와 같이 사용 시, './src/utils' 경로 사용 할 때 '@utils'로 사용할 수 있다

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "@assets": fileURLToPath(new URL("./src/assets", import.meta.url)),
      "@components": fileURLToPath(
        new URL("./src/components", import.meta.url)
      ),
      "@constants": fileURLToPath(new URL("./src/constants", import.meta.url)),
      "@hooks": fileURLToPath(new URL("./src/hooks", import.meta.url)),
      "@pages": fileURLToPath(new URL("./src/pages", import.meta.url)),
      "@routes": fileURLToPath(new URL("./src/routes", import.meta.url)),
      "@services": fileURLToPath(new URL("./src/services", import.meta.url)),
      "@utils": fileURLToPath(new URL("./src/utils", import.meta.url)),
      "@interface": fileURLToPath(new URL("./src/interface", import.meta.url)),
    },
  },
});

 

2. 타입스크립트 사용 시 tsconfig.json 을 수정하여, 설정한 별칭 경로를 타입스크립트가 인지할 수 있도록 해줘야한다. 

 - [paths] 옵션을 사용하여 설정해주자!

{
  "compilerOptions": {
    /* Alias */
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@assets/*": ["src/assets/*"],
      "@components/*": ["src/components/*"],
      "@constants/*": ["src/constants/*"],
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      "@routes/*": ["src/routes/*"],
      "@services/*": ["src/services/*"],
      "@utils/*": ["src/utils/*"],
      "@interface/*": ["src/interface/*"]
    }
  }
}