网站制作公司 顺的,宝安建设投资集团网站,电商网平台,网站开发的微端是什么在项目中难免会遇到一些特殊的需求#xff0c;例如同一套代码需要同时部署上两个不同的域名A和B。A和B的不同之处仅在于#xff0c;例如一些背景图片#xff0c;logo#xff0c;展示模块的不同#xff0c;其他业务逻辑是和展示模块是完全一样的。此时我们当然可以考虑单独…在项目中难免会遇到一些特殊的需求例如同一套代码需要同时部署上两个不同的域名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化部署完成。
