(1) .env 파일 만들기

.env파일을 만들고 아래와 같은 내용을 넣는다

VITE_PLUGIN_KEY=변수에들어갈내용

앞에 VITE_를 꼭 붙혀준다.
PLUGIN_KEY는 내가 임의로 붙힌 거고
원하는 변수명을 써주면 된다

(2) .gitignore 파일에 .env 추가하기

git에 올라가지 않게 .env파일을 추가해준다.
맨 아래에

.env

라고 써주면 된다

(3) vite-env.d.ts 파일 수정

/// <reference types="vite/client" /> //기본적으로 들어있는 코드

interface ImportMetaEnv {
  readonly VITE_PLUGIN_KEY: string; //이부분을 수정해준다. 위에 적은 변수의 타입을 적어준다
  // 다른 환경 변수들에 대해 아래에 위에처럼 타입을 지정해준다
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

(4) 원하는 곳에 변수 사용하기

import.meta.env.VITE_PLUGIN_KEY

import.meta.env.를 앞에 붙혀주고 .env에서 지정해줬던 변수명을 적는다.

예시

ChannelService.boot({
    pluginKey: import.meta.env.VITE_PLUGIN_KEY, // fill your plugin key
  });

채널톡을 구현하기 위해 pluginKey를 넣어야 하는데,
환경변수로 설정해줘서 드러나지 않게 한다.
위와 같은 형식으로 쓰면 된다