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

背景介绍

在JeecgBoot这类企业级开发框架中，经常会遇到需要根据不同域名显示不同网站标题的需求。这种需求在多租户系统中尤为常见，每个租户可能有自己的独立域名和定制化界面。

问题分析

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

1. 页面加载过程中会短暂显示默认标题
2. 无法根据访问域名动态变化
3. 需要为每个租户单独构建部署

解决方案

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

1. 前置请求租户信息：在应用初始化前，先发起一个请求获取当前域名的租户配置
2. 动态设置标题：获取到租户信息后，再初始化Vue应用
3. 实现方式：
   • 修改入口文件main.js，添加前置请求逻辑
   • 使用document.title动态设置页面标题
   • 将租户信息存入Vuex/Pinia状态管理

// 伪代码示例
fetchTenantInfo(window.location.hostname)
  .then(tenant => {
    document.title = tenant.title;
    // 其他租户特定配置
    initVueApp();
  });

方案二：服务端渲染方案

1. 服务端注入：在服务端根据请求域名动态生成HTML
2. 模板变量替换：将VITE_GLOB_APP_TITLE替换为实际租户标题
3. 优势：
   • 完全避免标题闪烁问题
   • 首屏加载即显示正确标题

方案三：Nginx反向代理方案

1. 动态注入：利用Nginx的sub_filter模块
2. 配置示例：

server {
    listen 80;
    server_name tenant1.example.com;
    
    location / {
        proxy_pass http://app-server;
        sub_filter 'DEFAULT_TITLE' 'Tenant1 Title';
        sub_filter_once off;
    }
}

实现建议

对于JeecgBoot项目，推荐采用以下组合方案：

1. 基础标题：保留.env中的默认配置作为fallback
2. 动态覆盖：应用加载后立即请求租户信息并更新标题
3. 状态管理：将租户信息存入全局状态，供其他组件使用

性能优化

1. 缓存策略：对租户信息请求添加缓存
2. 预加载：在HTML头部添加预加载链接
3. 骨架屏：使用与租户主题匹配的加载动画

注意事项

1. SEO优化：确保搜索引擎能抓取到正确的标题
2. 回退机制：处理租户信息请求失败的情况
3. 多语言支持：考虑标题的多语言适配

通过以上方案，可以优雅地实现JeecgBoot多租户系统中的动态标题功能，既保证了用户体验，又满足了业务需求。