shanxia2.0/mobile-h5/vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd(), '')
  const apiBaseUrl = env.VITE_API_BASE_URL || 'http://127.0.0.1:8000'

  // 打印代理配置（仅在开发环境）
  if (mode === 'development') {
    console.log('🔧 Vite Proxy Config:')
    console.log('  Target:', apiBaseUrl)
    console.log('  Path: /api -> forwarded with /api prefix (no rewrite)')
  }

  return {
    base: './',
    server: {
      port: 5174,
      proxy: {
        '/api': {
          target: apiBaseUrl,
          changeOrigin: true,
          secure: false,
          configure: (proxy, options) => {
            proxy.on('error', (err, req, res) => {
              console.log('❌ Proxy error:', err)
            })
            proxy.on('proxyReq', (proxyReq, req, res) => {
              const originalUrl = req.url || ''
              const [path, query] = originalUrl.split('?')
              const pathParts = path.split('/').filter(Boolean)

              // 集合根路径须带尾斜杠；客户端已规范化时勿再追加，避免 /api/inventory// 导致 404
              if (pathParts.length === 2 && pathParts[0] === 'api') {
                const resource = pathParts[1]
                const listResources = ['plans', 'inventory', 'weighing']
                if (listResources.includes(resource) && !path.endsWith('/')) {
                  const newPath = path + '/' + (query ? '?' + query : '')
                  proxyReq.path = newPath
                  req.url = newPath
                  console.log(
                    `➡️  Proxying: ${req.method} ${originalUrl} -> ${apiBaseUrl}${newPath} (added trailing slash)`
                  )
                  return
                }
              }
              console.log(`➡️  Proxying: ${req.method} ${req.url} -> ${apiBaseUrl}${req.url}`)
            })
            proxy.on('proxyRes', (proxyRes, req, res) => {
              console.log(`⬅️  Response: ${req.url} -> ${proxyRes.statusCode}`)
            })
          }
        }
      },
      host: true
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    plugins: [
      vue(),
      Components({
        resolvers: [VantResolver()],
        dts: 'src/types/components.d.ts',
        dirs: ['src/components'],
        extensions: ['vue']
      }),
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia'],
        dts: 'src/types/auto-imports.d.ts',
        eslintrc: {
          enabled: true,
          filepath: './.auto-import.json',
          globalsPropValue: true
        }
      })
    ],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/styles/variables.scss" as *;`
        }
      }
    }
  }
})