积木报表（JimuReport）与 RuoyiVue 集成部署问题解析

在将积木报表（JimuReport）与 RuoyiVue（3.8.5版本）集成并部署到 Linux 服务器时，通过 Nginx 反向代理后，前端界面无法正常展示。这是一个常见的部署配置问题，通常与路径和代理设置有关。

问题背景

积木报表是一个开源的企业级报表工具，RuoyiVue 是一个基于 Spring Boot 和 Vue 的前后端分离权限管理系统。在本地开发环境中，集成和测试通常没有问题，但在生产环境部署时，由于 Nginx 反向代理的配置，可能导致前端资源路径或 API 请求路径错误，从而引发界面显示异常。

根本原因

通过 Nginx 反向代理时，积木报表的前端页面和后台 API 请求路径需要与代理设置匹配。默认情况下，积木报表使用根路径（/）访问，但通过反向代理后，实际路径可能发生变化，导致前端无法正确加载资源或发送请求。

解决方案

自定义请求前缀

在积木报表的配置文件中，可以通过设置自定义请求前缀来适应反向代理环境。具体步骤如下：

1. 修改积木报表配置文件：在 application.yml 或 application.properties 中，添加或修改以下配置：

jimu:
  report:
    # 自定义请求前缀，例如设置为 /report
    context-path: /report

2. 调整 Nginx 配置：确保 Nginx 的反向代理设置与自定义前缀匹配。例如：

location /report/ {
    proxy_pass http://localhost:8080/report/;
    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;
}

3. 重启服务：修改配置后，重启积木报表服务和 Nginx，使配置生效。

其他注意事项

• 路径一致性：确保前端页面中所有资源请求（如 JS、CSS、图片）和 API 请求都使用统一的前缀。
• 静态资源处理：如果积木报表的静态资源是通过相对路径引用的，可能需要调整资源路径或使用绝对路径。
• 日志排查：查看浏览器开发者工具中的网络请求和错误日志，确认具体是哪些资源或请求失败，从而进一步调整配置。

总结

通过自定义请求前缀并调整 Nginx 配置，可以解决积木报表与 RuoyiVue 集成在 Linux 部署时前端无法正常展示的问题。这一方案适用于大多数反向代理场景，确保路径一致性是关键。在实际部署中，建议逐步测试和验证配置，避免因路径错误导致的服务不可用。