[Vite] process.env vs import.meta.env & Migration

import.meta.env 객체의 값은 Vite 개발 서버가 런타임 환경에서 동적으로 생성합니다. import.meta.env로 생성된 객체는 빌드 시점에 포함되지 않으며, 브라우저에서 접근 가능한 코드에서만 사용할 수 있습니다. build 시점에는 환경변수의 할당된 값이 번들링에 포함됩니다.

 

import.meta.env는 브라우저 환경에서 개발 중에 환경 변수 값을 확인하고 활용하기 위한 목적을 위한 기능이기 때문에 보안적인 측면은 고려되지 않았습니다. 또한 VITE_ 접두사로 정의한 환경 변수만 노출 되기 때문에 그 외 다른 환경변수는 노출되지 않습니다. 

 

process.env는 Node.js 환경에서 사용되는 환경 변수 객체입니다. Node.js 환경은 서버 사이드에서 실행되며, 런타임 환경에서는 클라이언트에 직접 노출되지 않습니다. 하지만 import.meta.env와 마찬가지로 build시 번들링된 JavaScript 파일을 통해 노출된 환경 변수의 값은 클라이언트 측에서 볼 수 있습니다.

 

Vite 공식 홈페이지에서 환경변수는 import.meta.env 외의 방법은 가이드하지 않습니다. 하지만 'vite-plugin-env-compatible' 을 설치하여 기존의 process.env를 사용할 수 있습니다. 기존에 vue-cli로 생성된 프로젝트를 vite로 마이그레이션 할 때, 코드 수정없이 Vite를 적용하고 싶은 경우 아래와 같은 방법으로 적용 할 수 있습니다.

 

1. vite-plugin-env-compatible 설치

$npm install --save-dev vite-plugin-env-compatible

2. vite.config.ts

import envCompatiblePlugin from 'vite-plugin-env-compatible';

export default defineConfig({
	plugins: [envCompatiblePlugin( /* options */)],
	define: {
		'process.env': process.env, // process.env를 전달
	},
})

3.  BASE_URL

이전 vue-cli에서 사용했던 process.env.BASE_URL은 vue.config.js에서 publicPath(default path : '/')를 의미합니다. 해당 방법으로 vite에서 process.env.BASE_URL을 사용해야 할 경우 .env에 개별 설정이 필요합니다.

// .env file
BASE_URL = '/'

 

 

참고사이트
https://velog.io/@skyepodium/vue-%EC%8B%A4%ED%96%89-%EB%AA%A8%EB%93%9C%EC%99%80-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%84%A4%EC%A0%95