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

[문제 상황]

처음 vite 를 시작하고, typescript 로 설정을 하면 상대경로만 지정을 할 수 있다. 설정을 추가해서 절대경로를 사용하는 방법을 알아보자.

 

[해결 방법]

 절대경로를 설정하기 위해서는 2개의 파일을 건드려야 한다.

 

1. vite.config.ts

vite 에게 경로에 대한 정보를 알려주어야 컴파일을 정상적으로 할 수 있다. 먼저 나의 파일 구조는 다음과 같다.

index.html
vite.config.ts
tsconfig.json
public
└─ vite.svg
src
├─ model
│ ├─ ...
│ └─ ...
├─ pages
│ ├─ ...
│ └─ ...
└─ main.ts

이때 public, src, model, pages 에 절대경로로 바로 접근할 수 있도록 한다. 그러기 위해서는 다음과 같이  vite.config.ts 를 작성하면 된다.

import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, ''),
      '@src': resolve(__dirname, 'src/'),
      '@pages': resolve(__dirname, 'src/pages/'),
      '@model': resolve(__dirname, 'src/model/'),
      '@public': resolve(__dirname, 'public/'),
    }
  }
})

 

2. tsconfig.json

 vite.config.ts 파일을 수정하였으니 "@model/..." 과 같이 import 를 해도 작동이 된다. 하지만 우리는 typescript 를 사용하고 있으니 이것 만으로는 부족하다. typescript 에서도 절대경로를 사용한다는 것을 알려줘야 한다.

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

 두 파일을 설정해주면 다음과 같이 절대경로를 사용할 수 있다.

import Component from "@model/component";