应用场景
客户常提的需求很直接：'系统好用是好事，但登录页别显示'若依管理系统'了，换成我们公司的 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 生命周期里尽早获取并应用配置。
封装获取域名的工具类
先写个简单的工具函数，方便后续复用。
// utils/domain.js
export const getTenantDomain = () => {
return window.location.hostname;
};
改造 store，存储租户信息
Vuex 里加几个 state，专门放租户相关的配置。
// store/modules/settings.js
state: {
logo: '',
appName: 'RuoYi',
themeColor: '#409EFF'
},
mutations: {
SET_TENANT_CONFIG(state, config) {
state.logo = config.logoUrl;
state.appName = config.appName;
state.themeColor = config.themeColor;
}
}
这里的坑：要在哪里调用？
很多新手会直接在 App.vue 里调，但这可能太晚了。最好在 main.js 里，路由守卫之前就把配置拉回来。这样路由渲染出来的组件才能拿到正确的主题色。
// main.js
import { getTenantConfig } from '@/api/config';
import store from '@/store';
(async () => {
try {
const res = await getTenantConfig();
store.commit('SET_TENANT_CONFIG', res.data);
} catch (e) {
console.warn('租户配置加载失败，使用默认值');
}
})();
第四步：替换静态资源
最后一步是把拿到的配置应用到实际 UI 组件上。若依的 Header 和 Sidebar 组件通常有固定的 Logo 路径，需要改成从 store 读取。
比如在 Header 组件里：
<img :src="settings.logo" class="logo" />
主题色同理，可以用 CSS 变量或者动态 style 绑定。
最终效果与总结
做完这些，你的系统就能支持多租户独立域名访问了。不同客户打开不同的子域名，看到的 Logo、标题甚至主题色都不一样。
这种方案的优势在于扩展性强，不用改代码就能上线新租户。当然，缓存策略也得跟上，避免频繁请求接口影响性能。希望这篇分享能帮你在 SaaS 交付路上少踩点坑。
