Vite 구성하기

명령줄에서 vite를 실행할 때, Vite는 자동으로 프로젝트 루트 내부에 있는 vite.config.js라는 설정 파일을 해결하려고 합니다. (프로젝트 루트 내의 다른 JS 및 TS 확장자도 지원됩니다).

가장 기본적인 구성 파일은 다음과 같습니다:

// vite.config.js
export default {
  // 구성 옵션
}

Vite는 ES 모듈 구문을 구성 파일에서 사용할 수 있습니다. 심지어 프로젝트가 네이티브 Node ESM을 사용하지 않더라도, 예를 들어 package.json의 type: "module"에서도 사용할 수 있습니다. 이 경우, 구성 파일은 로드되기 전에 자동으로 전처리됩니다.

또한 --config CLI 옵션을 사용하여 사용할 구성 파일을 명시적으로 지정할 수도 있습니다 (현재 작업 디렉토리에서 해결됨):

vite --config my-config.js

구성 인텔리센스

Vite는 TypeScript typings과 함께 제공되므로 jsdoc 유형 힌트를 사용하여 IDE의 인텔리센스를 활용할 수 있습니다:

/** @type {import('vite').UserConfig} */
export default {
  // ...
}

또는 jsdoc 주석이 필요하지 않은 인텔리센스를 제공해야 할 경우 defineConfig 헬퍼를 사용할 수도 있습니다:

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

Vite는 TS 구성 파일도 직접 지원합니다. defineConfig 헬퍼와 함께 vite.config.ts를 사용할 수도 있습니다.

조건부 구성

구성이 명령(serve 또는 build), 사용되는 모드, SSR 빌드 (isSsrBuild), 또는 빌드 미리보기 (isPreview)에 기반하여 옵션을 조건부로 결정해야 하는 경우 함수를 내보낼 수 있습니다:

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  if (command === 'serve') {
    return {
      // 개발용 구성
    }
  } else {
    // command === 'build'
    return {
      // 빌드용 구성
    }
  }
})

중요한 점은 Vite의 API에서 command 값이 개발 중에는 serve이며 (CLI에서 vite, vite dev, vite serve가 별칭으로 사용됨), 프로덕션용으로 빌드할 때는 build입니다 (vite build).

isSsrBuild와 isPreview는 추가적인 선택적 플래그로, 각각 빌드와 서버 명령을 구분합니다. Vite 구성을 로드하는 일부 도구는 이러한 플래그를 지원하지 않을 수 있으며 대신 undefined를 전달할 수 있습니다. 따라서 true와 false에 대한 명시적인 비교를 사용하는 것이 권장됩니다.

비동기 구성

구성이 비동기 함수를 호출해야하는 경우, 대신 비동기 함수를 내보낼 수 있습니다. 이 비동기 함수는 향상된 인텔리센스 지원을 위해 defineConfig를 통해 전달될 수도 있습니다:

export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // vite 구성
  }
})

구성에서 환경 변수 사용

환경 변수는 일반적으로 process.env에서 얻을 수 있습니다.

Vite는 root 및 envDir 옵션을 평가한 후에만 .env 파일을 기본적으로 로드하지 않습니다. 그러나 필요한 경우 특정 .env 파일을 로드하기 위해 내보낸 loadEnv 헬퍼를 사용할 수 있습니다:

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 현재 작업 디렉토리에서 `mode`에 기반하여 env 파일 로드.
  // `VITE_` 접두사와 상관없이 모든 env를 로드하려면 세 번째 매개변수를 ''로 설정하세요.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 구성
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})