若依框架二次开发——实现定制化前端动态域名与换肤改造

文章目录

• 一、应用场景
• 二、架构设计
• 三、改造步骤
• • 1、第一步：Nginx 泛域名解析
  • 2、第二步：后端提供配置接口
  • 3、第三步：前端核心改造（Vue）
  • • 3.1. 封装获取域名的工具类
    • 3.2. 改造 store，存储租户信息
    • 3.3. 这里的坑：要在哪里调用？
  • 4、第四步：替换静态资源
• 四、最终效果与总结

一、应用场景

你的客户“李总”打来电话： “你们这个系统好用是好用，但为什么登录页显示的还是‘若依管理系统’？能不能换成我们公司的 Logo？还有，能不能给我们一个专属网址，比如 oa.lisan.com，别让我们用那个长长的 IP 地址！” 这就是 SaaS 交付中的“最后一公里”——前端体验的租户隔离。 今天，我们就来改造 RuoYi-Vue 的前端，实现 动态域名解析、Logo 标题自动切换 以及 千人千面的主题换肤。

二、架构设计

前端怎么知道我是谁？ 在传统单体应用中，Logo 和标题通常是写死在 vue.config.js 或者 .env 文件里的。但在 SaaS 模式下，这些必须是动态的。 我们的核心逻辑如下：

• 用户访问 tenantA.saas.com。
• Nginx 泛解析，将请求转发给前端。
• 前端启动（main.js） 拦截，获取当前 URL 的 host。
• 调用后端接口（无需鉴权），根据域名查询租户配置（Logo、Title、主题色）。
• 渲染页面，并在