Vue.js axios 전역 설정과 baseURL 설정

vue cli 를 통한 vue3를 설치했습니다. router와 vuex 등을 체크하고 설치했습니다.

main.js 기본구조 입니다.

 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

 

npm install axios

axios를 설치해줍니다.

 

import axios from "axios";

axios를 import 해줍니다.

 

axios.defaults.baseURL = 'http://localhost:8888'

baseURL를 설정해줍니다.

 

// createApp(App).use(store).use(router).mount('#app')

const app = createApp(App)
app.config.globalProperties.axios = axios;
app.use(store).use(router).mount('#app')

기본 설정된 createApp 줄을 주석 처리하고, config.globalProperties를 통해 axios를 전역 설정해줍니다.

 

methods:{
    submitForm(){
      const formData = new FormData()
      formData.append('email', this.email)
      formData.append('password', this.password)
      formData.append('name', this.name)
      this.axios.post('/users',formData).then(res => {
        console.log(res.data)
      })
    }

이제 axios를 사용할 부분에서 this.axios로 사용하면 됩니다.