PayrollManagementSystem/frontend/vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import vue from '@vitejs/plugin-vue'
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    server: {
      port: Number(env.VITE_PORT ?? 5173),
      // 显式绑定 IPv4 回环。不指定时 Vite 在本机只监听 [::1]:5173，
      // 于是 localhost:5173 能开、127.0.0.1:5173 却连不上 ——
      // 这种"换个写法就坏"的差异排查起来很费时间。
      host: '127.0.0.1',
      proxy: {
        // 后端路由本身带 /api 前缀，因此不做 rewrite
        //
        // 目标地址用 127.0.0.1 而非 localhost：Node 17+ 对 localhost 优先解析
        // IPv6 的 ::1，而 uvicorn 默认只监听 127.0.0.1，用 localhost 会连不上。
        //
        // 开发期走代理而非后端 CORS，符合规范「跨域在网关统一处理」；
        // 副作用是 /api/docs（Swagger）也能从 5173 端口打开，联调期只用一个域名。
        '/api': {
          target: env.DEV_API_TARGET || 'http://127.0.0.1:8000',
          changeOrigin: true,
        },
      },
    },
  }
})