1. 项目概述最近接手了一个企业级SaaS系统的二次开发需求客户要求在若依框架基础上实现前端动态域名解析和个性化换肤功能。简单来说就是让不同企业客户访问自己的专属域名如companyA.xxx.com时系统能自动展示该企业的Logo、名称和主题色。这个需求在SaaS产品中非常典型——既要保持底层代码统一又要让每个客户感受到专属系统的体验。下面我就把这次改造的核心思路和具体实现过程整理出来特别会重点分享几个关键环节的坑和解决方案。2. 架构设计与核心思路2.1 需求本质分析客户的核心诉求其实包含三个层面域名隔离每个租户拥有独立子域名tenantA.xxx.com视觉定制自动加载对应租户的Logo、系统名称主题切换动态应用租户预设的主题配色传统单体应用通常把这些配置写死在打包文件里但SaaS模式需要运行时动态加载。这就引出了我们的技术方案。2.2 技术架构设计整个方案的执行流程如下域名解析层Nginx配置泛域名解析将所有*.xxx.com请求统一转发前端拦截层应用启动时提取当前域名信息配置获取层调用后端接口获取租户配置无需认证动态渲染层应用配置并渲染页面sequenceDiagram participant 用户 participant Nginx participant 前端 participant 后端 用户-Nginx: 访问 tenantA.xxx.com Nginx-前端: 转发请求 前端-后端: 获取租户配置 后端--前端: 返回Logo/主题等配置 前端-用户: 渲染定制化页面关键点所有配置请求必须在登录鉴权前完成否则会陷入先有鸡还是先有蛋的死循环3. 具体实现步骤3.1 Nginx泛域名配置首先需要在Nginx配置泛域名解析这是整个方案的基础server { listen 80; server_name ~^(?subdomain.)\.xxx\.com$; location / { proxy_pass http://frontend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }关键参数说明server_name使用正则表达式捕获子域名必须传递Host头否则前端无法获取原始域名建议同时配置SSL证书实现HTTPS访问3.2 后端配置接口开发需要新增一个无需认证的接口根据域名查询租户配置GetMapping(/api/tenantConfig) public RTenantConfig getConfigByDomain(RequestHeader String host) { // 示例伪代码 String tenantCode extractTenantCode(host); // 从xxx.xxx.com提取xxx TenantConfig config tenantService.getConfig(tenantCode); return R.ok(config); } // 配置项DTO示例 Data public class TenantConfig { private String logoUrl; private String systemName; private String primaryColor; private String secondaryColor; }安全提示这个接口要做限流防护避免被恶意刷接口3.3 前端核心改造3.3.1 域名解析工具类创建src/utils/domain.jsexport function getCurrentTenant() { const host window.location.hostname; // 获取完整域名 const regex /^(.*?)\.xxx\.com$/; const match host.match(regex); return match ? match[1] : default; }3.3.2 Vuex状态改造修改store/modules/app.jsconst app { state: { tenantConfig: { logo: , title: 默认系统, theme: #409EFF } }, mutations: { SET_TENANT_CONFIG(state, config) { state.tenantConfig config; } }, actions: { async loadTenantConfig({ commit }) { const tenant getCurrentTenant(); const res await getTenantConfig(tenant); // 调用后端接口 commit(SET_TENANT_CONFIG, res.data); // 动态修改document.title document.title res.data.title || 默认系统; // 动态加载CSS变量 document.documentElement.style.setProperty(--primary-color, res.data.primaryColor); } } }3.3.3 初始化时机选择这里有个关键坑点配置加载必须在路由守卫之前。正确的初始化顺序// main.js import store from ./store // 先加载租户配置 await store.dispatch(loadTenantConfig) // 然后初始化Vue实例 new Vue({ // ...其他配置 })如果顺序反了会出现登录页已经渲染完成才加载配置的闪屏问题。3.4 主题换肤实现基于CSS变量实现动态主题定义基础变量src/styles/variables.scss:root { --primary-color: #409EFF; --secondary-color: #ecf5ff; }在组件中使用变量el-button typeprimary :style{backgroundColor: var(--primary-color)} 按钮 /el-button动态修改变量值见前面store代码4. 踩坑实录与优化建议4.1 常见问题排查问题1Nginx配置后前端仍获取不到正确域名检查Nginx是否正确传递了Host头前端console.log(window.location.hostname)验证问题2CSS变量不生效检查变量名是否带双横线--确保在:root选择器下定义问题3登录页闪屏确认配置加载在Vue初始化之前添加loading过渡效果4.2 性能优化建议本地缓存将租户配置存入localStorage避免重复请求CDN加速租户Logo等静态资源建议使用CDN托管预加载在index.html中添加preload链接link relpreload href/api/tenantConfig asfetch crossoriginanonymous4.3 安全注意事项接口限流防止通过枚举子域名获取租户信息域名白名单验证域名合法性CSP设置防止XSS攻击篡改主题5. 最终效果展示实现后不同租户访问时将看到完全定制化的界面访问companyA.xxx.com显示CompanyA的Logo浏览器标题显示CompanyA OA系统主题色为蓝色系访问companyB.xxx.com显示CompanyB的Logo标题为CompanyB协同平台主题色为绿色系这个方案目前已经在生产环境稳定运行半年多支持了50企业的SaaS化部署需求。最大的收获是认识到前端动态化配置对SaaS产品的重要性——不仅能提升客户体验还能大幅减少定制化开发的成本。
