Nginx部署前后端分离项目

编译前端项目

修改 .env 环境变量

Vite 环境变量加载机制：.env.[mode].local > .env.local > .env.[mode] > .env

cd yudao-ui-admin-vue3
npm install
# npm构建，package.json 中配置了这个
npm run build:prod
# 或者使用vite构建
vite build --mode prod

构建完成后，会在 dist 或 dist-prod 目录下生成静态资源。

Nginx配置

编辑 Nginx 配置文件（如 conf/nginx.conf 或某个自定义 .conf 文件）

server {
    listen       89;
    server_name  192.168.10.195;  # 根据实际 IP 或域名修改

    # 前端资源路径
    location / {
        root   E:\\ftpdata\\ruoyi-vue-pro\\yudao-ui\\yudao-ui-admin-vue3\\dist-prod;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;  # 前端路由支持（防止刷新 404）
    }

    # 后端接口 - 管理后台
    location /admin-api/ {
        ## proxy_pass为后端项目所在服务器的 IP
        proxy_pass http://192.168.10.195:48080/admin-api/;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 后端接口 - 用户 App
    location /app-api/ {
        ## proxy_pass为后端项目所在服务器的 IP
        proxy_pass http://192.168.10.195:48080/app-api/;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

重启nginx

# Windows 示例
nginx -s reload

# Linux 示例
sudo nginx -t && sudo systemctl reload nginx

常见问题