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.说明

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