vite.config.ts에서 환경 변수 사용하기

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

axios 모듈 & Vite 환경 변수 설정 (env)

작성

262

안녕하세요.

선생님 강의에서 .env 와 .env.development로 환경 변수가 모드에 따라서 구분 되는 것을 보았습니다.

제가 VITE_BASE_PATH 환경 변수를 설정하고

vite.config.ts 파일에서 vite 설정의 base 옵션에 사용했을 시에도 development 모드와 production 모드가 정상적으로 동작이 될까요?

const env = load(mode, process.cwd())

return {

base: env.VITE_BASE_PATH,

}

vite vite.config.ts env

답변 2

짐코딩

지식공유자

안녕하세요.

아래와 같은 방법으로 환경변수를 읽을 수 있습니다.

import { loadEnv } from 'vite';
import { fileURLToPath, URL } from 'url';
import Components from 'unplugin-vue-components/vite';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig(({ mode }) => {
	// 모드에 맞는 환경 변수 로드
	const env = loadEnv(mode, process.cwd(), '');

	return {
		plugins: [
			vue(),
			Components({
				dirs: ['src/components/app'],
				dts: true,
			}),
		],
		resolve: {
			alias: {
				'@': fileURLToPath(new URL('./src', import.meta.url)),
			},
		},
	}
});

공식문서 참고 링크

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

조준희님의 질문에 맞는 구체적인 해결 방안을 제공하는 콘텐츠를 찾았습니다. “.env 파일, .env.development 파일을 생성하여 환경변수를 분리하여 관리하는 방법”에 대해 설명하고 있으며, Vite를 사용하여 환경 변수를 설정하는 방법에 대한 질문과 유사합니다.

Vite에서 환경변수와 모드 관리 포스트에서는 vite.config.ts 파일에서 환경 변수를 다루는 방식에 대해 다루고 있습니다. 질문자가 설정한 VITE_BASE_PATH 환경 변수를 vite.config.ts 파일의 base 옵션에 사용하는 것이 개발(development) 및 프로덕션(production) 모드에서 정상 동작하는지 여부에 대한 해답을 찾는 데 도움될 수 있습니다. 이 포스트에서는 .env, .env.development, 그리고 .env.production 파일을 사용하여 다양한 모드에서 환경 변수를 관리하는 방법을 설명하고 있습니다.

공유된 링크에서는 Vite가 기본적으로 제공하는 환경변수 관리 방법과, build 시 환경변수 접근에 대한 깊이 있는 설명이 포함되어 있어 조준희님의 경우에도 유용할 것으로 보입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

vite.config.ts에서 환경 변수 사용하기