VUE 프로젝트에서 환경 변수를 관리하는 방법

환경 변수 관리는 VUE 프로젝트에서 중요하며 빌드 도구를 기반으로 올바른 방법을 선택해야합니다. 1. Vue CLI 프로젝트는 vue_app_ 접두사와 함께 .env 파일을 사용하여 process.env.vue_app를 통해 액세스합니다. 2. Vite 프로젝트는 import.meta.env.vite_를 통해 액세스하는 vite_ 접두사를 사용합니다. 3. 해당 파일을로드하기 위해 사용자 정의 모드를 지원하고 .env.local 클래스 파일을 .gitignore에 추가해야합니다. 4. 항상 프론트 엔드에 민감한 정보를 노출하지 않고 참조를 위해 .env.example을 제공하고 런타임에 필요한 변수를 확인하십시오. 변수는 정적으로 구축 될 때 주입됩니다. 동적 구성이 필요한 경우 런타임로드 체계를 사용하십시오.

VUE 프로젝트에서 환경 변수 관리는 개발, 테스트 및 생산 환경, 특히 API 엔드 포인트, 기능 플래그 또는 타사 서비스 키에 대한 다양한 구성을 처리하는 데 필수적입니다. 다음은 가장 일반적인 VUE 스캐 폴딩 도구 인 설정 (Vue Cli 또는 Vite)에 따라 올바르게 수행하는 방법입니다.

1. Vue Cli에서 .env 파일 사용

Vue CLI를 사용하는 경우 .env 파일을 통해 환경 변수를 지원합니다. 이 파일은 빌드 및 서비스 프로세스 중에 자동으로로드됩니다.

지원되는 .env 파일 유형 :

• .env - 모든 경우에로드 됨
• .env.local - 모든 경우에로드되었지만 git에 의해 무시됩니다 (비밀 사용)
• .env.[mode] - 지정된 모드로만로드되었습니다 (예 : .env.production )
• .env.[mode].local - 위와 동일하지만 git에 의해 무시됩니다

예제 파일 :

 # .env.development
vue_app_api_url = https : //api.dev.example.com
vue_app_debug = true

# .env.production
vue_app_api_url = https : //api.example.com
vue_app_debug = false

따라야 할 규칙 :

• VUE_APP_ 로 접두사 한 변수 만 클라이언트 번들에 포함됩니다.
• 코드에서 process.env.VUE_APP_YOUR_VAR 를 통해 액세스하십시오.

 // vue 구성 요소 또는 js 파일에서
console.log (process.env.vue_app_api_url);

⚠️은 브라우저에서 끝나는 환경 변수에 민감한 데이터 (API 비밀과 같은)를 저장하지 않습니다. 그들은 JS 번들에 내장되어 있으며 누구에게나 볼 수 있습니다.

2. Vite 기반 VUE 프로젝트의 환경 변수

Vite ( create-vue 또는 vite init 로 생성 된 VUE 3 프로젝트에서 일반적)를 사용하는 경우 핸들링이 약간 다릅니다.

vite .env 파일 규칙 :

• 클라이언트 코드에 노출 되려면 변수를 VITE_ 로 접두사해야합니다.
• 파일 : .env , .env.local , .env.[mode] (예 : .env.production )

예:

 # .env.development
vite_api_url = https : //api.dev.example.com
vite_app_name = 내 앱 개발자

# .env.production
vite_api_url = https : //api.example.com
vite_app_name = 내 앱입니다

코드 액세스 :

 Console.log (import.meta.env.vite_api_url);
console.log (import.meta.env.vite_app_name);

? Vite는 process.env 대신 import.meta.env 사용합니다.

3. 다른 모드와 사용자 정의 환경 사용

Vue Cli와 Vite는 모두 사용자 정의 모드를 지원합니다.

Vue Cli에서 :

 # 사용자 정의 모드를 사용합니다
vue-cli-service serve-모드 스테이징

.env.staging 로드합니다.

초대하다:

 # package.json 스크립트에서
"스크립트": {
  "Serv : Staging": "Vite -모드 스테이징"
}

그런 다음 vite.config.js 만들려면 모드를 정의하고 적절한 .env 파일을로드하십시오.

 내보내기 기본값 ({mode}) => {
  process.env = {... process.env, ... loadenv (mode, process.cwd ())};
  반품 {
    // 구성
  };
};

4. 모범 사례

• 비밀을 .env.local .env.*.local .gitignore .
• 예제 제공 : 자리 표시 자 값이있는 저장소에 .env.example 포함.

   # .env.example
  vue_app_api_url = your_dev_api_url
  vite_api_url = your_dev_api_url

• 필수 변수 유효성 검사 : 런타임을 확인하십시오. 중요한 변수가 정의 된 경우.
• 빌드 시간에 사용하십시오 : 환경 변수는 정적이며 런타임이 아닌 빌드시 설정됩니다. 런타임 구성이 필요한 경우로드에서 가져온 구성 파일을 고려하십시오.

---

요약

도구	접두사	접근	파일 예제
Vue Cli	VUE_APP_	process.env.VUE_APP_*	.env.production
vite	VITE_	import.meta.env.VITE_*	.env.staging

빌드 도구를 기반으로 올바른 패턴을 선택하고 프론트 엔드에서 비밀을 유지하며 모드를 사용하여 환경을 분리하십시오.

기본적으로 파일의 이름을 올바르게 지정하고 올바른 접두사를 사용하여 표시된대로 코드로 액세스하십시오. 추가 라이브러리가 필요하지 않습니다.

위 내용은 VUE 프로젝트에서 환경 변수를 관리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!