vite의 config 파일에서 환경 변수를 사용하려면

Vue CLI는 config 파일 내의 env 파일에 정의된 환경 변수에 액세스할 수 있지만 Vite는 config 파일 내의 환경 변수에 액세스할 수 없습니다.
다만, 나는 vite.config.(js|ts) 파일 안에 환경 변수를 사용하고 싶은 장면이 매우 많다고 생각한다.

왜 액세스할 수 없습니까?

vite는 config 파일에 envDir와mode 등을 설정할 수 있습니다.그리고 이 값을 확정할 수 없으면 어떤 env 파일을 사용할지 결정할 수 없습니다.
따라서 config 파일을 평가하지 않으면 환경 변수를 읽을 수 없습니다.

그럼 어떡하지?

우선 필요한 환경 변수가 command (dev/serve 또는build) mode 만 있다면 config 파일의 기술을 다음과 같이 사용할 수 있습니다.

import { defineConfig } from 'vite';

export default defineConfig(({ command, mode }) => {
  // 設定
});

다른 env 파일에서 독립적으로 설정해야 하는 환경 변수는 loadEnv 함수를 사용할 수 있습니다.

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ command, mode }) => {
  const env = { ...loadEnv(mode, process.cwd()) };
  // 設定
});

하나의 매개 변수는 읽을 env의 모델이고 두 번째 인수는 env 파일의dir참고 자료이다.
명령을 실행할 때의 모드입니다. 루트 디렉터리의 config 파일을 읽을 수 있습니다.
쓰지 않았지만 세 번째 인자가 있습니다. 환경 변수의prefix를 지정할 수 있습니다.기본값'VITE_'이므로 환경 변수는 'VITE_'부터 가져옵니다.
세 번째 매개변수에 ''를 지정하면 'VITE_'를 제외한 모든 환경 변수가 포함됩니다.