前端saas化部署

在项目中难免会遇到一些特殊的需求，例如同一套代码需要同时部署上两个不同的域名A和B。A和B的不同之处仅在于，例如一些背景图片，logo，展示模块的不同，其他业务逻辑是和展示模块是完全一样的。此时我们当然可以考虑单独将代码复制一份出来，单独部署域名B，但是此时的维护成本就会增加。所以我们考虑到将部署同一套代码上去，然后进行一些区分。当然这种情况要看具体的业务需求。
决定使用同一套代码部署，那我们就需要处理以下问题
1，确定哪些是需要动态变化的内容，进行变量化
2，这些变量的内容从哪里获取
我们根据上面问题开始一一处理

域名A和域名B展示的内容区别有，接口访问域名，logo图片，背景图片。
新增一个配置文件config/baseHost.js

var origin = window.location.origin;
var host = window.location.host;
var pathname = window.location.pathname;
module.exports = {baseUrl: process.env.NODE_ENV === 'development' ? '/dev-api' : origin,study_baseUrl: process.env.NODE_ENV === 'development' ? '/study-api' : origin,url: host,pathname: pathname + '#/',
};

保存需要更新的内容缓存信息，此处选择的是通过localStorage和vuex一起存储。

store/app.js

const state = {logoBj: localStorage.getItem('logoBj') ? JSON.parse(localStorage.getItem('logoBj')) : {} //logo图片，登录图片等配置图片
};
/**更新tab菜单选中索引*/
SET_TENANTID: (state, current) => {console.log('SET_TENANTID-------------', current);state.tenantId = current?.tenantId;state.logoBj = current || {};localStorage.setItem('logoBj', JSON.stringify(current));localStorage.setItem('tenantId', current?.tenantId);
}

app.vue

// 获取用户配置信息
getTenantId() {this.$api.getTenantId().then(res => {if (res.rCode == 0) {this.SET_TENANTID(res.results || {});}});
}

我们通过当前访问域名提取接口域名并配置在配置文件中。
通过请求用户配置信息接口获取不同域名下的配置信息，并保存起来。
其他页面使用时进行调用。
此时基于此业务场景的saas化部署完成。