Vite + Vue 3 프로젝트 빠른 시작 — 환경 설정부터 배포까지

프로젝트 생성

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

vite.config.ts 핵심 설정

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

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

  // 경로 별칭 — @/components/Button.vue 처럼 사용
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },

  // 개발 서버 설정
  server: {
    port: 3000,
    open: true,
    // API 프록시 — CORS 우회
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

  // 빌드 최적화
  build: {
    outDir: 'dist',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
        },
      },
    },
  },
})

환경 변수 설정

# .env
VITE_API_URL=http://localhost:8080

# .env.production
VITE_API_URL=https://api.myapp.com

// 사용
const apiUrl = import.meta.env.VITE_API_URL

VITE_ 접두사가 없는 변수는 클라이언트에 노출되지 않습니다.

절대 경로 import

vite.config.ts에 alias 설정 후:

// ❌ 상대 경로
import Button from '../../../components/Button.vue'

// ✅ 절대 경로
import Button from '@/components/Button.vue'

TypeScript 경로 인식 — tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

빌드 결과 분석

npm install -D rollup-plugin-visualizer

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

plugins: [
  vue(),
  visualizer({ open: true }) // 빌드 후 브라우저 자동 열림
]

자주 쓰는 명령어

npm run dev      # 개발 서버 시작
npm run build    # 프로덕션 빌드
npm run preview  # 빌드 결과 미리보기