JeecgBoot多租户系统中实现动态网站标题的最佳实践

背景介绍

在JeecgBoot这类企业级快速开发平台中，经常会遇到需要根据不同域名显示不同网站标题的需求。这种需求在SaaS系统、多租户平台中尤为常见，每个租户可能使用不同的子域名或独立域名访问系统，同时希望展示自己专属的品牌信息。

问题分析

传统的实现方式是在.env配置文件中设置VITE_GLOB_APP_TITLE环境变量，这种方式存在以下局限性：

1. 静态配置无法根据访问域名动态变化
2. 页面加载初期会短暂显示默认标题
3. 无法实现租户级别的个性化展示

解决方案

方案一：前端动态请求方案

1. 初始化请求：在应用启动时，首先发送一个轻量级的API请求获取当前域名对应的租户信息
2. 响应处理：从响应中提取租户特定的标题配置
3. 动态设置：
   • 使用document.title更新页面标题
   • 通过Vue响应式数据更新界面中的标题显示
4. 加载过渡：在等待响应期间，可以显示一个简洁的默认标题或加载动画

// 在应用入口文件中
fetchTenantInfo().then(tenant => {
  document.title = tenant.title;
  app.config.globalProperties.$title = tenant.title;
});

方案二：服务端渲染方案

对于对SEO有要求的场景，可以采用：

1. 服务端识别：在服务端根据请求的Host头识别租户
2. 动态生成：服务端渲染时注入租户特定的标题
3. 前端同步：将标题信息通过window对象传递给前端应用

<script>
  window.__TENANT_TITLE__ = "<%= tenant.title %>";
</script>

方案三：Nginx前置处理方案

1. 请求拦截：在Nginx层根据访问域名进行路由
2. 变量注入：通过Nginx的sub_filter模块动态替换HTML中的标题占位符
3. 缓存优化：为不同域名的页面设置不同的缓存策略

实现细节

租户信息API设计

建议设计一个轻量级的租户信息接口：

{
  "code": 200,
  "data": {
    "tenantId": "tenant123",
    "title": "ABC公司管理系统",
    "logo": "/tenant/abc/logo.png",
    "theme": "light-blue"
  }
}

前端缓存策略

为避免频繁请求，可以采用以下缓存策略：

1. LocalStorage缓存：将租户信息缓存在本地
2. 缓存时效：设置合理的过期时间
3. 域名关联：使用访问域名作为缓存键

错误处理机制

1. 超时处理：设置合理的请求超时时间
2. 降级方案：请求失败时回退到默认标题
3. 重试机制：对于临时性错误可自动重试

性能优化建议

1. 预加载：在HTML的head中添加预加载链接
2. 资源压缩：确保API响应经过压缩
3. CDN加速：对租户信息API启用CDN缓存
4. HTTP/2：使用HTTP/2协议提升并发性能

总结

在JeecgBoot项目中实现多域名动态标题展示，推荐采用前端动态请求方案，它具有良好的灵活性和可维护性。对于性能要求极高的场景，可以结合服务端渲染或Nginx前置处理方案。无论采用哪种方案，都需要考虑缓存策略和错误处理机制，确保用户体验的一致性。