ruoyi前后的分离部署

原创已于 2025-10-28 13:47:49 修改 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #ruoyi

于 2025-10-17 12:32:32 首次发布

详解Ruoyi-Vue项目在Nginx下的子路径部署配置

在实际开发中，我们经常需要将前端项目部署到域名的子路径下（如http://localhost/ssp），而不是根路径。本文将以Ruoyi-Vue框架为例，详细介绍如何通过Nginx配置和前端代码调整，实现项目在子路径下的正确部署。

一、场景说明

假设我们需要将Ruoyi-Vue前端项目部署到：

访问路径：http://localhost/ssp
前端静态文件存放路径：/home/xingrui/ssp
后端接口地址：http://127.0.0.1:8080（通过Nginx代理访问）

二、Nginx配置详解

Nginx作为反向代理服务器，需要同时处理两件事：

正确映射前端静态资源
代理后端API接口请求

完整Nginx配置

server {
    listen 80;
    server_name localhost;

    # 前端项目子路径配置
    location /ssp { 
        # 静态文件根目录（alias会替换匹配的/ssp路径）
        alias   /home/xingrui/ssp;
        # 默认首页文件
        index index.html index.htm index.php;
        # SPA路由支持：当文件不存在时，转发到/ssp/index.html由前端路由处理
        try_files $uri /ssp/index.html; 
    }

    # 后端接口代理配置
    location ^~ /prod-api/ {
        # 代理到后端服务地址（末尾/表示去掉/prod-api前缀）
        proxy_pass http://127.0.0.1:8080/;
        # 传递完整主机信息给后端
        proxy_set_header Host $http_host;
        # 传递客户端真实IP给后端
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    # 日志配置
    access_log  /www/wwwlogs/com.log;
    error_log  /www/wwwlogs/com.error.log;
}

配置关键点解析

location /ssp 配置
- 使用alias而非root：因为alias会将匹配的/ssp路径直接替换为/home/xingrui/ssp，而root会拼接路径（不适合子路径场景）
- try_files配置：解决SPA应用路由跳转404问题，当访问的文件不存在时，自动转发到ssp/index.html
- index指令：指定默认首页文件
location ^~ /prod-api/ 配置
- ^~修饰符：表示优先匹配该路径，避免被其他正则规则覆盖
- proxy_pass末尾的/：表示将/prod-api前缀从请求路径中移除（如/prod-api/user会代理为http://127.0.0.1:8080/user）

三、前端代码调整

Ruoyi-Vue项目需要修改3处配置，确保路由和资源路径正确匹配子路径/ssp。

1. 配置公共路径（vue.config.js）

// vue.config.js
module.exports = {
  // 生产环境下的公共路径（子路径）
  publicPath: process.env.NODE_ENV === "production" ? "/ssp/" : "/",
  // 其他配置...
}

作用：指定项目部署的基础路径，确保打包后的CSS、JS等静态资源能正确加载（路径会自动加上/ssp/前缀）。

2. 配置路由基础路径（src/router/index.js）

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history', // 去掉URL中的#
  base: "/ssp/", // 路由基础路径，与Nginx配置的子路径保持一致
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

作用：设置路由的基础路径，确保前端路由跳转时会自动带上/ssp前缀（如/login会变为/ssp/login）。

3. 调整登录跳转路径（src/utils/request.js）

当登录过期时，需要确保跳转路径正确：

// src/utils/request.js
if (!isRelogin.show) {
  isRelogin.show = true;
  MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
    confirmButtonText: '重新登录',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    isRelogin.show = false;
    store.dispatch('LogOut').then(() => {
      // 跳转路径需要带上子路径前缀
      location.href = '/ssp/index';
    })
  }).catch(() => {
    isRelogin.show = false;
  });
}

作用：确保登录过期后，能正确跳转到子路径下的登录页。

四、部署流程总结

前端打包

# 构建生产环境包
npm run build:prod

文件部署
- 将打包生成的dist目录下的所有文件，复制到服务器的/home/xingrui/ssp目录
Nginx配置
- 复制上述Nginx配置到nginx.conf或站点配置文件
- 重启Nginx使配置生效：nginx -s reload
验证部署
- 访问http://localhost/ssp，检查页面是否正常加载
- 测试路由跳转（如登录、进入菜单），确认无404错误
- 测试接口调用（如获取用户信息），确认接口能正常返回数据