Jeecg-Boot多租户环境下动态设置网站标题的解决方案

背景介绍

在Jeecg-Boot项目中，当我们需要部署同一套代码到多个站点（不同域名）时，经常会遇到需要根据访问域名动态显示不同网站标题的需求。特别是在多租户系统中，每个租户可能对应不同的域名，且希望在前端展示个性化的网站标题。

问题分析

当前Jeecg-Boot项目中使用的是Vite构建工具，网站标题通过环境变量VITE_GLOB_APP_TITLE在.env配置文件中定义。这种方式存在以下局限性：

1. 标题在构建时就被固定，无法根据运行时访问的域名动态变化
2. 页面加载过程中（包括标签页title和loading动画下方的文字）会直接显示配置的默认标题
3. 需要页面完全加载后才能通过API获取租户信息来更新标题，导致短暂显示默认标题的问题

解决方案

方案一：前端动态获取租户信息

1. 前置请求租户信息：在应用初始化前，先发起一个API请求获取当前域名对应的租户信息
2. 使用全局状态管理：将获取到的租户信息（包括网站标题）存储在Vuex或Pinia中
3. 动态设置标题：在应用挂载时，从状态管理中读取标题并设置到document.title
4. 优化加载体验：可以添加一个简单的loading状态，避免标题闪烁

// 在main.js或入口文件中
async function initApp() {
  try {
    const tenantInfo = await getTenantInfoByDomain(window.location.hostname);
    store.commit('setTenantInfo', tenantInfo);
    document.title = tenantInfo.title || '默认标题';
  } catch (error) {
    console.error('获取租户信息失败', error);
    document.title = '默认标题';
  }
  
  createApp(App).use(store).mount('#app');
}

initApp();

方案二：服务端渲染标题

1. 服务端中间件：在Node.js服务端添加中间件，根据请求的host动态注入标题
2. 模板引擎处理：使用类似EJS的模板引擎，在服务端渲染时动态替换标题
3. SSR支持：如果项目支持服务端渲染(SSR)，可以直接在服务端获取租户信息并设置标题

方案三：Nginx反向代理处理

1. Nginx变量注入：通过Nginx的sub_filter模块，在反向代理时动态替换HTML中的标题
2. Lua脚本支持：使用OpenResty的Lua脚本，根据域名动态生成不同的HTML内容
3. 边缘计算处理：在CDN边缘节点通过Edge Workers处理请求，动态修改响应内容

最佳实践建议

对于Jeecg-Boot项目，推荐采用方案一的前端动态获取方式，原因如下：

1. 改动最小：不需要调整现有构建流程和部署架构
2. 灵活性高：可以轻松扩展其他租户个性化配置
3. 维护简单：所有租户配置集中管理，便于维护

实现时需要注意以下几点：

1. 租户信息API应该设计为轻量级，响应速度快
2. 考虑添加本地缓存，避免每次刷新都请求
3. 添加合理的超时和错误处理机制
4. 对于SEO有要求的页面，需要特殊处理

扩展思考

在多租户系统中，除了网站标题外，通常还需要考虑以下个性化配置：

1. 网站LOGO和主题色
2. 登录页背景和样式
3. 系统功能模块的可见性
4. 业务数据的隔离和权限控制

这些都可以通过类似的动态配置机制来实现，构建一个真正灵活的多租户SaaS平台。