应用场景
客户常提的需求很直接:'系统好用是好事,但登录页别显示'若依管理系统'了,换成我们公司的 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 生命周期里尽早获取并应用配置。
封装获取域名的工具类
先写个简单的工具函数,方便后续复用。
= () => {
..;
};


