axios로 서버와 연결 후 npm run dev를 했더니 비어있는 흰 화면만 보여졌다.
콘솔에서 🚨uncaught referenceerror: process is not defined 에러🚨를 확인할 수 있었다.
이에 대한 해결방법으로 5가지가 있다.
-
환경 변수 접근 방식 변경: Vue 프로젝트에서 환경 변수에 접근하려면 process.env.VARIABLENAME 대신 Vue CLI에서 제공하는 방식을 사용해야 한다. 예를 들어, .env 파일에 정의된 변수는 VUE_APP 접두사를 사용하여 process.env.VUE_APP_VARIABLE_NAME과 같은 형태로 접근해야 한다.
-
Webpack DefinePlugin 사용: 프로젝트가 Webpack을 사용하는 경우, DefinePlugin을 사용하여 process 또는 process.env를 정의할 수 있다. 이렇게 하면 프론트엔드 코드에서도 process 객체에 접근할 수 있다.
-
Node.js 환경 확인: process 객체는 Node.js 환경에서만 사용할 수 있다. 프론트엔드 코드에서 process 객체에 직접 접근하는 것이 아니라면, 해당 코드가 실수로 프론트엔드에 포함되었을 수 있다. 이 경우, 해당 코드를 서버 사이드 코드로 옮기거나 다른 방식으로 수정해야 한다.
-
코드 위치 확인: 오류가 발생한 파일의 해당 줄을 확인하여, process 객체를 사용하려는 구체적인 코드를 찾아보자. 문제의 원인을 파악하기 위해 해당 코드를 검토해야 한다.
-
환경 설정 파일 확인: .env 파일이 프로젝트 루트에 존재하며 올바르게 설정되었는지 확인하자. .env 파일에서 환경 변수를 정의할 때 VUEAPP 접두사를 사용했는지 확인한다.
✅나의 경우는 Vue CLI와 Vite가 내부적으로 환경 변수를 처리하는 방식의 차이에서 비롯되었다.
처음에 .env 파일을 components 폴더에 생성을 해서 파일 위치가 올바르지 않았다. ⚠️루트 디렉토리에 .env 파일을 둬야 한다⚠️
그러나 루트 디렉토리에 .env 파일을 두고도 에러는 변함이 없었다.
환경 변수를 로드하는 방식 때문이었다.
const serverUrl = process.env.VUE_APP_BASE_URL || '//localhost:1234
💊Vue CLI 프로젝트라면 process.env.VUE_APP_과 같은 코드를 써야 한다.
Vue CLI를 사용하는 프로젝트에서는 .env 파일에 정의된 환경 변수를 process.env를 통해 접근하기 때문이다.
또한, 환경 변수 이름이 VUE_APP_ 접두사로 시작해야 한다. 이는 Vue CLI의 구성 요소가 빌드 시에 해당 환경 변수를 프론트엔드 코드에 주입할 수 있도록 한다.
const serverUrl = import.meta.env.VITE_APP_BASE_URL || '//localhost:1234'
💊Vite 프로젝트에는 import.meta.env.VITE_APP_과 같은 코드를 써야 한다.
Vite는 import.meta.env를 사용하여 환경 변수에 접근하기 때문이다.
그리고 Vite에서는 환경 변수 이름에 VITE_ 접두사를 사용한다. 이 접두사를 사용하여 환경 변수를 정의하면, Vite는 이 변수들을 빌드 시에 공개적으로 접근 가능하게 만든다.
🎯Vue CLI는 내부적으로 Webpack을 사용하여 process.env를 통한 환경 변수 접근을 지원하는 반면, Vite는 보다 현대적인 ES 모듈 기반의 접근 방식을 사용한다.
