Vite+Ts 절대 경로 설정

Vite 절대 경로 설정 방법

vite 환경에서 절대경로를 사용하고싶다면 vite.config.js에 절대경로를 사용하겠다는 코드를 추가해주어야합니다. 자바스크립트 환경에선 이걸로 충분하지만 타입스크립트에서는 tsconfig.json을 추가적으로 수정해야 합니다.

1. vite.config.js

vite.config.js에서 resolve -> alias 배열 안에 객체의 형태로 find에는 절대 경로의 별칭입력합니다. 그리고 replacement에는 해당 절대 경로를 입력하면 됩니다.

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      { find: '@pages', replacement: path.resolve(__dirname, 'src/pages') },
    ]
  }
})

2. tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
      "@pages/*": ["pages/*"],
      "@components/*":["components/*"],
      "@hooks/*":["hooks/*"],
      "@model/*":["model/*"],
      "@style/*":["style/*"],
    }
    ...
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}