若依框架二次开发：实现前端动态域名解析与主题换肤

应用场景

客户常提的需求很直接：'系统好用是好事，但登录页别显示'若依管理系统'了，换成我们公司的 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、主题色）。
• 渲染页面，并在初始化阶段注入这些配置。

改造步骤

第一步：Nginx 泛域名解析

这一步是基础。假设你的主域名是 saas.com，你需要配置一条通配符规则。这样无论用户访问哪个子域，流量都能落到同一套前端资源上。

nginx 配置大概长这样：

server {
    listen 80;
    server_name *.saas.com;
    root /usr/share/nginx/html;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

注意这里用了 *.saas.com，只要主机名匹配，请求就会进来。接下来我们要让前端自己识别这个主机名。

第二步：后端提供配置接口

前端拿到域名后，得有个地方查配置。虽然理论上可以全在前端处理，但为了安全和管理方便，建议还是走后端接口。

不需要复杂的鉴权，因为配置本身是公开的（Logo、颜色等）。接口返回结构大致如下：

{
  "code": 200,
  "data": {
    "logoUrl": "https://cdn.example.com/logo.png",
    "appName": "客户定制系统",
    "themeColor": "#409EFF"
  }
}

后端可以根据请求头中的 Host 字段来路由查询对应的租户表数据。

第三步：前端核心改造（Vue）

这部分是重头戏。我们需要在 Vue 生命周期里尽早获取并应用配置。

封装获取域名的工具类

先写个简单的工具函数，方便后续复用。

   = () => {
   ..;
};