[ Vite + React ] 절대경로 alias 설정하기

component를 import 할때 ../../ 경로가 들어가는데 좀 더 단순화 하기 위해

절대경로를 설정하여 좀 더 단순하게 표시할 수 있다.

 

vite의 경우 이미 해당 라이브러리가 이미 포함되어있기 때문에 따로 설치할 필요가 없지만

 

vite가 아닌 경우 직접 라이브러리를 설치해줘야한다. 또한 추가적으로 설정을 해주어야한다.

npm install path-browserify

 

vite의 경우에는 vite.config.js 파일만 설정해주면 되지만

vite가 아닌 경우 config.js 파일도 작업을 해주어야한다.

---

Useage

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
})

 

Vite.config.ts 파일에서 'src' 폴더를 @로 alias 매핑

 

tsconfig.ts 파일에 baseUrl과 paths를 설정

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

 

이후 파일에서는 import시 ../../을 @로 사용하여 표현할 수 있다.

 

이러한 형태를 @로 좀 더 단순화 할 수 있다.

import Icon from '../../assets/icon/brush.svg?react'

import Icon from '@/assets/icon/brush.svg?react'