[Vue] Vite 환경 변수 + axios전역 설정으로 개발/배포 URL 구분하기

 

 

Vite Proxy

 

https://ko.vitejs.dev/config/server-options.html#server-proxy

Vite

 

vite.config.js

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        }
      }
    }
})

server.proxy를 사용해서 /api/~ 요청시 서버 URL로 요청하게 설정 했지만

빌드했을때는 localhost가 아닌 배포된 서버 URL로 요청해야 합니다.

그래서 Vite에서 제공하는 Proxy 방법말고 다른 방법으로 설정하겠습니다.

 

 

반응형

 

 

Vite env

 

https://ko.vitejs.dev/guide/env-and-mode.html

Vite

Vite에서 제공하는 환경 변수 설정 방법입니다.

환경 변수로 서버 URL(localhost:8080)을 설정하고 사용하는데,

배포 환경에서는 배포된 서버 URL로 바꿔주는 방법을 사용하겠습니다

 

 

 

.env                # 모든 상황에서 사용될 환경 변수
.env.local          # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수
.env.[mode]         # 특정 모드에서만 사용될 환경 변수
.env.[mode].local   # 특정 모드에서만 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수

이러한 옵션도 있는데 간단하게 .env 파일로만 사용하겠습니다.

 

 

.env

VITE_API_URL = "http://localhost:8080"

Vite 환경 변수는 일반 환경 변수와 구분하기 위해 VITE_ 접두사를 붙입니다.

 

 

 

 

 

axios 전역 설정

main.js

import axios from 'axios'
...

axios.defaults.baseURL = import.meta.env.VITE_API_URL

const app = createApp(App)
app.config.globalProperties.axios = axios
...

간편하게 axios를 사용하기 위해 전역 설정하는데, 서버와 통신할 때 환경 변수의 URL을 사용하기 위해서

baseURL을 환경 변수로 설정한 VITE_API_URL로 설정해줍니다

 

이제 개발 환경에서는 axios를 사용해 http요청 하면 localhost:8080/~로 작동됩니다