[Vue.JS] .env 파일 설정하는 방법

OpenAi 사용하는데 요거 설정 때문에 살짝 오래걸림ㅎㅅㅎ,,,,

방법은! 스택오버플로우 아저씨들의 도움을 받았다!

 

 

1. env 파일 생성하기

echo > .env

 

 

2. 보안이 필요한 데이터 .env 파일 넣기

VUE_APP_OPENAI_API_KEY=your_api_key_here
VITE_API_URL=https://api.example.com

 

 

3. vite.config.js 파일에 env 파일 세팅하기

import { fileURLToPath, URL } from 'node:url';
import { defineConfig,loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default ({ mode }) => {
  // 현재 모드에 맞는 환경 변수를 로드합니다.
  const env = loadEnv(mode, process.cwd(), "");

  return defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          // changeOrigin: true,
        },
      },
    },
    
    // process.env에 환경 변수를 추가합니다.
    define: {
      "process.env": env,
    },
  });
};

 

4. 최종 확인

프로젝트 파일 재시작 후 

  console.log(process.env.VUE_APP_OPENAI_API_KEY);

 

 콘솔에 잘 찍히면 끝~~!

 

 

[참고]

https://stackoverflow.com/questions/71083110/vue-uncaught-referenceerror-process-is-not-defined

Vue Uncaught ReferenceError: process is not defined