Configuration File

16.1.1. Full Configuration Example

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. Configuration Principles

• The @ alias must be mapped to the src/ directory. Relative paths (../../) must not be used.
• The development server API proxy must be configured to point to the backend server address.
• The build target must be set to es2015 to support modern browsers.

---

16.1.3. Plugin Configuration

• @vitejs/plugin-vue is mandatory.
• Additional plugins should be configured based on project requirements.

Plugin	Purpose	Requirement
@vitejs/plugin-vue	Vue SFC support	Mandatory
vite-plugin-vue-devtools	Debugging tools during development	Recommended
rollup-plugin-visualizer	Bundle analysis	Optional

---

16.1.4. Proxy Configuration

An API proxy must be configured to prevent CORS issues in the development environment.

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

• A reverse proxy (e.g., Nginx) must be used in the production environment.
• Proxy paths must be configured to match the backend API paths.