설정 파일

16.1.1. 전체 설정 예시

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },

  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },

  build: {
    target: 'es2015',
    outDir: 'dist',
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
        },
      },
    },
  },
})

---

16.1.2. 설정 원칙

• @ alias를 src/ 디렉토리에 매핑합니다. 상대 경로(../../)는 사용하지 않습니다.
• 개발 서버의 API 프록시는 백엔드 서버 주소로 설정합니다.
• 빌드 target은 es2015로 설정하여 모던 브라우저를 지원합니다.

---

16.1.3. 플러그인 설정

• @vitejs/plugin-vue는 필수입니다.
• 추가 플러그인은 프로젝트 요구사항에 따라 설정합니다.

플러그인	용도	필수 여부
@vitejs/plugin-vue	Vue SFC 지원	필수
vite-plugin-vue-devtools	개발 시 디버깅 도구	권장
rollup-plugin-visualizer	번들 분석	선택

---

16.1.4. 프록시 설정

개발 환경에서 CORS 문제를 방지하기 위해 API 프록시를 설정합니다.

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    },
    '/ws': {
      target: 'ws://localhost:8080',
      ws: true,
    },
  },
},

• 프로덕션 환경에서는 리버스 프록시(Nginx 등)를 사용합니다.
• 프록시 경로는 백엔드 API 경로와 일치하도록 설정합니다.