[Vite] Vite 설정 파일

Vite는 기본적으로 설정 파일 없이도 간단하게 개발할 수 있지만, 더욱 편리한 사용을 위해 설정 파일을 사용할 수 있습니다. Vite 설정 파일은 프로젝트 루트에 위치하며, Vite 개발 서버와 빌드 시스템의 동작을 사용자 정의하는데 사용됩니다. 이 글에서는 Vite 설정 파일의 작성 방법과 주요 설정 옵션에 대해 알아보겠습니다.

---

Vite 설정 파일 작성

Vite 설정 파일은 vite.config.js라는 이름으로 프로젝트 루트에 생성합니다. 설정 파일은 기본적으로 CommonJS 형태로 작성되며, Vite 설정 객체를 내보내야 합니다. 아래는 간단한 Vite 설정 파일의 예시입니다.

// vite.config.js
module.exports = {
  // 설정 옵션
  server: {
    port: 3000,
    open: true,
  },
};

---

주요 설정 옵션

Vite 설정 파일에서 자주 사용되는 주요 설정 옵션을 살펴보겠습니다.

root

• 타입: string
• 기본값: process.cwd()

프로젝트의 루트 디렉토리를 지정합니다. 보통 설정 파일이 위치한 경로와 동일한 디렉토리를 가리킵니다.

base

• 타입: string
• 기본값: '/'

앱이 호스팅될 기본 경로를 지정합니다. 예를 들어, /my-app/로 설정하면 모든 경로가 /my-app/로 시작합니다.

publicDir

• 타입: string
• 기본값: 'public'

정적 자산이 위치한 디렉토리를 지정합니다. 이 디렉토리 내의 파일은 빌드 시점에 복사됩니다.

server

• 타입: object

Vite 개발 서버 옵션을 설정합니다.

• port: 개발 서버 포트 번호를 지정합니다. 기본값은 3000입니다.
• open: 개발 서버가 실행될 때 브라우저를 자동으로 열지 여부를 설정합니다. 기본값은 true입니다.

 

build

• 타입: object

Vite 빌드 옵션을 설정합니다.

• outDir: 빌드 결과물이 저장될 디렉토리를 지정합니다. 기본값은 'dist'입니다.
• assetsDir: 빌드 결과물 내에서 정적 자산이 위치할 경로를 지정합니다. 기본값은 'assets'입니다.
• sourcemap: 소스맵을 생성할 지 여부를 설정합니다. 기본값은 false입니다.

---

설정 파일 적용

Vite 설정 파일을 작성한 뒤에는 프로젝트 루트에서 개발 서버를 실행하면 설정이 적용됩니다.

npm run dev

위 명령어를 실행하면 Vite 개발 서버가 설정 파일에 정의된 옵션을 사용하여 실행됩니다. 설정 파일을 통해 프로젝트의 동작을 더욱 효율적으로 제어할 수 있으며, 다양한 환경에 맞춰서 프로젝트를 구성할 수 있습니다.