vue에서 API_KEY 설정하는 방법

 

화면처럼 .env.local 파일을 하나 만들어서

이렇게 이름과 키를 넣어준다.

 

그 다음에 axios로 요청을 보내는데

getTmdbPopular({ commit }) {
      const TMDB_API_KEY = process.env.VUE_APP_TMDB_API_KEY;
      const API_URL = `https://api.themoviedb.org/3/movie/popular`;
      const params = {
        api_key: TMDB_API_KEY,
        language: "ko",
        region: "KR",
      };
      axios({
        url: API_URL,
        method: "GET",
        params,
      }).then((res) => {
        console.log(res);
        console.log(res.data.results);
        commit("GET_TMDB_POPULAR", res.data.results);
      });
    },

위 코드처럼 process.env.(내가 설정한 키 이름)으로 키를 만들어준다.

그리고 params에 api_key값으로 넣어서 axios에 전달하면 정상적으로 키 입력이 완료된다.

 

 

키를 설정했으면 서버를 다시 껐다 켜야 제대로 적용이 된다.