파일 구조

index.js

// local vue api axios instance
import axios from 'axios';

function apiInstance() {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_API_BASE_URL,
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
    },
  });
  return instance;
}

export { apiInstance };

• baseURL과 headers를 설정하기 위해 넣었습니다.

.env.local 파일 만들기

VUE_APP_API_BASE_URL=http://localhost:8080/

• BASE_URL은 노출되면 안 좋으니까 env.local 파일을 만들고 주소는 서버 주소로 작성해줍니다

API 파일을 기능에 따라 분류하기

import { apiInstance } from './index.js';
const api = apiInstance();

API 작성

function getTest(param, success, fail) {
  api.get(`url주소`).then(success).catch(fail);
}
export { getTest };

API를 이용하여 함수 호출

import { getTest } from '@/api/test.js';

getTest(param, 성공하고싶을 때 로직, 실패했을 때 로직);