web 前端实现一个根据域名的判断 来显示不同的logo 和不同的标题

1.需求

有可能我做一个后台 web端 我想实现一套代码的逻辑 显示不同的公司主题logo以及内容，但是实际上 业务逻辑一样 

2.实现

建一个store oem.ts 这个名为是 oem系统

oem.ts

import { defineStore } from 'pinia';import { store } from '@/store';const oemDataList = [{domain: ['www.xxxx.com'],logoUrl: '/oem/xxx/logo1.jpg',name: 'xxx管理平台',companyName: '河北xxxx有限公司',},{domain: ['www.xxxx.com'],logoUrl: '/oem/xxx/logo1.jpg',name: 'xxx管理平台',companyName: '河北xxxx有限公司',},
];const currentOemData = () => {// 根据当前域名匹配oem数据const currentDomain = window.location.hostname;const oemData = oemDataList.find((item) => {return item.domain.includes(currentDomain);});console.log(currentDomain, 'currentDomain');console.log(oemData, 'oemData');return oemData || oemDataList[0];
};export const useOemStore = defineStore('oem', {state: () => ({logoUrl: currentOemData().logoUrl,name: currentOemData().name,companyName: currentOemData().companyName,}),getters: {},actions: {},persist: true,
});export function getOemStore() {return useOemStore(store);
}

3.说明

这样这些字段就成为了一个全局的变量 显示在页面上就可以了