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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/458269.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

改进神经网络

Improve NN 文章目录 Improve NNtrain/dev/test setBias/Variancebasic recipeRegularizationLogistic RegressionNeural networkother ways optimization problemNormalizing inputsvanishing/exploding gradientsweight initializegradient checkNumerical approximationgrad…

定制红酒:如何通过定制红酒提升企业形象

在市场竞争激烈的今天,品牌形象是企业获得竞争优势的关键因素之一。云仓酒庄洒派深知这一点,并利用定制红酒服务来提升品牌形象。以下是一些主要的方法和策略: 1. 与众不同性:定制红酒的与众不同性是企业提升品牌形象的关键。企业…

神经网络 | 常见的激活函数

Hi,大家好,我是半亩花海。本文主要介绍神经网络中必要的激活函数的定义、分类、作用以及常见的激活函数的功能。 目录 一、激活函数定义 二、激活函数分类 三、常见的几种激活函数 1. Sigmoid 函数 (1)公式 (2&a…

Linux联网安装MySQL Server

yum安装 以下代码复制粘贴到控制台即可 yum list | grep mysql-server #查看可以下载的MySQLyum install -y mysql-server #安装MySQLmysql_secure_installation #引导安装 引导安装实例如下 systemctl enable mysqld 设置开机自动启动 systemctl sta…

Verilog刷题笔记19

题目: A common source of errors: How to avoid making latches When designing circuits, you must think first in terms of circuits: I want this logic gate I want a combinational blob of logic that has these inputs and produces these outputs I want…

VRRP配置

目录 网络拓扑图 配置要求 配置步骤 网络拓扑图 配置要求 按照图示配置 IP 地址和网关在 SW1,SW2,SW3 上创建 Vlan10 和 Vlan20,对应 IP 网段如图,交换机之间链路允许所有 VLAN 通过在 SW1 和 SW2 上配置 VRRP,要求…

【C语言】三子棋游戏实现代码

目录 1.三子棋代码功能介绍 2.三子棋游戏实现步骤 ①打印菜单栏 ②判断是否进入三子棋游戏 ③三子棋游戏基本函数实现 (1)清空(初始化)棋盘函数实现 (2)打印棋盘函数实现 (3&#xff0…

Nacos(1)

Nacos注册中心 主要解决问题 假如微服务被调用较多,为了应对更高的并发,进行了多实例部署 此时,每个微服务的实例其IP或端口不同,问题来了: 这么多实例,如何知道每一个实例的地址?http请求要…

股票K线简介

股票K线(K-Line)是用于表示股票价格走势的图形,主要由四个关键价格点组成:开盘价、收盘价、最高价和最低价。K线图广泛应用于股票市场技术分析中,它提供了丰富的信息,帮助分析师和投资者理解市场的行情走势…

消息队列使用的四种场景介绍

一、简介 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量削锋等问题。 实现高性能,高可用,可伸缩和最终一致性架构。 使用较多的消息队列有ActiveMQ,RabbitMQ,ZeroMQ…

go消息队列RabbitMQ - 订阅模式-fanout

1、发布订阅 订阅模式,消息被路由投递给多个队列,一个消息被多个消费者获取。 1) 可以有多个消费者 2) 每个消费者有自己的queue(队列) 3) 每个队列都要绑定到Exchange(交换机&…

龙测科技荣获2023年度技术生态构建奖

本月,由极客传媒举办的“有被Q到”2024 InfoQ 极客传媒合作伙伴年会顺利举办,龙测科技喜获2023年度技术生态构建奖。 InfoQ是首批将Node.js、HTML5、Docker等技术全面引入中国的技术媒体之一,秉承“扎根社区、服务社区、引领社区”的理念&…