nginx配置，以及前后端的代码演示案例

后端代码

server:
  port: 8088
  servlet:
    context-path: /api

nginx配置代理

# /etc/nginx/conf.d/shanhuashuoye.conf
upstream shanhuashuoye_backend {
    server 127.0.0.1:8088;  # 项目后端地址
}

server {
    listen 前端端口号;
    server_name 服务器地址IP;
    
    charset utf-8;
    
    # 项目的前端目录
    location / {
        root /usr/local/shanhuashuoye/frontend/dist;
        try_files $uri $uri/ /index.html;
    }

    location /prod-api/ {
        proxy_pass http://shanhuashuoye_backend/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # 项目的独立日志
    access_log /var/log/nginx/shanhuashuoye_access.log main;
    error_log /var/log/nginx/shanhuashuoye_error.log;
}

前段代码

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

export default defineConfig(({ mode }) => {
  // 环境配置集中管理：改地址只动这里，不用改其他地方
  const envConfig = {
    development: {
      API_BASE_URL: '', // 开发环境留空，依赖 Vite 代理转发
      API_PREFIX: '/dev-api',
      PROXY_TARGET: 'http://127.0.0.1:8088/api' // 开发后端地址（带 /api）
    },
    production: {
      API_BASE_URL: 'http://服务器地址IP:前端访问端口号', // 生产环境 Nginx 地址（84端口）
      API_PREFIX: '/prod-api',
      PROXY_TARGET: '' // 生产环境不用 Vite 代理，留空即可
    }
  }[mode] || envConfig.development; // 兜底：默认用开发环境配置

  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
      },
    },
    // 注入环境变量到前端，请求工具可直接用
    define: {
      'import.meta.env.VITE_API_BASE_URL': JSON.stringify(envConfig.API_BASE_URL),
      'import.meta.env.VITE_API_PREFIX': JSON.stringify(envConfig.API_PREFIX),
    },
    // 开发环境代理（npm run dev 时生效）
    server: {
      proxy: {
        [envConfig.API_PREFIX]: { // 动态匹配前缀（不用写死 /dev-api）
          target: envConfig.PROXY_TARGET,
          changeOrigin: true,
          rewrite: (path) => path.replace(new RegExp(`^${envConfig.API_PREFIX}`), ''), // 动态去掉前缀
        },
      },
    },
    // 补全本地预览代理（npm run preview 时生效，避免预览时接口报错）
    preview: {
      proxy: {
        [envConfig.API_PREFIX]: { // 动态匹配 /prod-api
          target: envConfig.PROXY_TARGET,
          changeOrigin: true,
          rewrite: (path) => path.replace(new RegExp(`^${envConfig.API_PREFIX}`), ''),
        },
      },
    },
  }
})