前端根据环境变量配置网页的title和favicon

前端根据环境变量配置网页的title和favicon

  • 前言
  • 流程步骤
    • 一、设置environment文件
    • 二、在入口文件中配置
    • 三、删除index.html中的title和 icon link
    • 四、使用对应的打包命令进行部署
  • 注意事项
    • 一、angular中,需要在angular.json添加favicon.ico额外的构建

前言

有些项目可能有这样的需求:

在我们自己的测试环境要用自己公司的图标,在客户环境用客户的图标。
有很多同学每次打包部署都是手动修改对应代码实现的。但这样太麻烦了。 X
如果通过配置一键执行打包命令那才是“解放双手”。

流程步骤

一、设置environment文件

在这里插入图片描述

// environment.ts
export const environment = {production: false,title: '开发环境系统',favicon: 'favicon.ico'
};
// environment.prod.ts
export const environment = {production: true,title: '生产环境系统',favicon: 'favicon.prod.ico'
};

二、在入口文件中配置

// main.tsimport { environment } from './environments/environment';
// 根据环境变量设置页面标题和icon
document.title = environment.title;
const link = document.createElement('link');
link.rel = 'icon';
link.type = "image/x-icon";
link.href = environment.favicon;
document.head.appendChild(link);

三、删除index.html中的title和 icon link

  <meta charset="utf-8"><!-- <title></title> --><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> -->

四、使用对应的打包命令进行部署

npm run build #开发环境npm run build:prod #生产环境

注意事项

一、angular中,需要在angular.json添加favicon.ico额外的构建

在这里插入图片描述
在这里插入图片描述

有几个favicon.ico就配置几个

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

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

相关文章

[C++][数据结构][图][中][图的遍历][最小生成树]详细讲解

目录 1.图的遍历1.广度优先遍历2.深度优先遍历 2.最小生成树1.Kruskal算法2.Prim算法 1.图的遍历 给定一个图G和其中任意一个顶点 v 0 v_0 v0​&#xff0c;从 v 0 v_0 v0​出发&#xff0c;沿着图中各边访问图中的所有顶点&#xff0c;且每个顶 点仅被遍历一次 “遍历”&…

《Windows API每日一练》5.1 键盘基础

本节我们讲述关于键盘的一些基础知识。当我们按下一个键盘按键时&#xff0c;会产生一个键盘按键消息。这一点你能确定吗&#xff1f;假如是一个菜单快捷键消息&#xff0c;或者是一个子窗口控件消息呢&#xff1f;这就超出了本节讨论的范围&#xff0c;我们将在菜单和子窗口控…

Jenkins+K8s实现持续集成(二)

部署前呢&#xff0c;要先把jenkins搭建好。 同时呢已经有了k8s的环境。 基于以上两步已经有了的情况&#xff0c;继续要实现jenkinsk8s持续集成&#xff0c;需要先准备四个文件&#xff1a; Dockerfile首先要准备好一个Dockerfile文件&#xff0c;用于构建Docker镜像的文本…

安装cuda、cudnn、Pytorch(用cuda和cudnn加速计算)

写在前面 最近几个月都在忙着毕业的事&#xff0c;好一阵子没写代码了。今天准备跑个demo&#xff0c;发现报错 AssertionError: Torch not compiled with CUDA enabled 不知道啥情况&#xff0c;因为之前有cuda环境&#xff0c;能用gpu加速&#xff0c;看这个报错信息应该是P…

React常用方法汇总【更新中】

文章目录 前言创建项目启动命令列表渲染父子组件传值useEffect 异步函数使用方法useEffect 异步函数清除方法控制组件显示隐藏axios 安装使用 前言 运行 react 需要先安装 node.js&#xff0c;具体安装步骤可以参考这篇文章 https://blog.csdn.net/weixin_43721000/article/de…

如何在 MySQL 或 MariaDB 中导入和导出数据库

作者选择了自由开源基金会作为 Write for Donations 计划的捐赠对象。 介绍 在软件开发中&#xff0c;导入和导出数据库是一项常见任务。您可以使用数据转储来备份和恢复信息。您还可以使用它们将数据迁移到新的服务器或开发环境。 在本教程中&#xff0c;您将使用 MySQL 或…

spring xml实现bean的生命周期

spring xml实现bean的生命周期 搭建maven工程&#xff0c;导入maven依赖(需要jdk17或者降低spring-context版本) <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><versio…

Linux GCC G++:各个版本发行年份及新增特性盘点

目录 GCC盘点 GCC 4.0 GCC 4.1 GCC 4.2 GCC 4.3 GCC 4.4 GCC 4.5 GCC 4.6 GCC 4.7 GCC 4.8 GCC 4.9 GCC 5.0 GCC 6.0 GCC 7.0 GCC 8.0 GCC 9.0 GCC 10.0 GCC 11.0 GCC 12.0 GCC 13.0 GCC稳定版本 GCC 4.8 GCC 4.9 GCC 5.0 GCC 6.0 GCC 7.0 GCC 8.0 …

Vue65-vue-resource:ajax请求

vue-resource是vue的插件库&#xff0c;用vue.use(xxxx)使用插件。 1、安装 2、引入和使用 这个库&#xff0c;维护的频率不高了。还是建议使用&#xff1a;axios&#xff0c;vue-resource只是了解即可。

MySQL8,Navicat能登陆成功,密码却忘记了

执行成功的图&#xff1a; 以下为步骤&#xff1a;本文一共8个简单步骤。 环境&#xff1a;mysql8、window10、navicat11 1、打开本地电脑window10的命令窗&#xff08;俗称黑窗口&#xff09;&#xff0c;windowR 2、输入regegit&#xff0c;回车&#xff0c;打开注册表 3、…

【React】《React 学习手册 (第2版) 》笔记-Chapter12-React 服务器端渲染

十二、React 服务器端渲染 我们可以采用同构方式渲染 React&#xff0c;以便支持浏览器以外的平台。这意味着&#xff0c;我们可以在服务器端渲染 UI&#xff0c;然后再发给浏览器。借助服务器端渲染&#xff0c;可以提升性能、增进可移植性、提高安全性。 同构&#xff08;is…

Flink Time 详解

Flink在处理实时数据流时&#xff0c;时间是一个核心概念。Flink支持多种时间语义&#xff0c;以满足不同业务场景的需求。以下是对Flink中时间概念的详细解释&#xff1a; 一、时间概念概述 在Flink中&#xff0c;时间主要分为三种类型&#xff1a; 事件时间&#xff08;Eve…

技术差异,应用场景;虚拟机可以当作云服务器吗

虚拟机和云服务器是现在市面上常见的两种计算资源提供方式&#xff0c;很多人把这两者看成可以相互转换或者替代的物品&#xff0c;实则不然&#xff0c;这两种资源提供方式有许多相似之处&#xff0c;但是也有不少区别&#xff0c;一篇文章教你识别两者的技术差异&#xff0c;…

【全文档】软件项目经理需要掌握的文档有哪些?

软件项目经理在项目管理过程中需要编写多种文档&#xff0c;以下是常见的十五个文档&#xff1a; 项目计划&#xff1a; 详细描述了项目的范围、时间、成本、资源、沟通计划等关键信息&#xff0c;是项目管理的核心文档。 需求文档&#xff1a; 记录了项目的业务需求、功能需求…

vue3第二阶段的开发文档

1 2.1 案例——学习计划表 2.1.1 准备工作 在开发“学习计划表”案例之前&#xff0c;需要先完成一些准备工作&#xff0c;具体步骤如下。 ① 打开命令提示符&#xff0c;切换到 D:\vue\chapter02 目录&#xff0c;在该目录下执行如下命令&#xff0c;创建 项目。 np…

深入理解预处理

1.预定义符号 C语言设置了⼀些预定义符号&#xff0c;可以直接使用&#xff0c;预定义符号也是在预处理期间处理的。 __FILE__ //进⾏编译的源⽂件 __LINE__ //⽂件当前的⾏号 __DATE__ //⽂件被编译的⽇期 __TIME__ //⽂件被编译的时间 __STDC__ //如果编译器遵循ANSI C&…

3. ceph-mimic版本部署

ceph-mimic版本部署 一、ceph-mimic版本部署1、环境规划2、系统基础环境准备2.1 关闭防火墙、SELinux2.2 确保所有主机时间同步2.3 所有主机ssh免密2.4 添加所有主机解析 3、配置ceph软件仓库4、安装ceph-deploy工具5、ceph集群初始化6、所有ceph集群节点安装相关软件7、客户端…

AI-“国外一开源,国内就创新”!

大模型领域中美差距有多大&#xff1f; 近年来&#xff0c;人工智能技术在全球范围内迅速发展&#xff0c;特别是在大型语言模型和机器学习方法方面取得了突破性进展。在这个领域&#xff0c;计算能力的提升也推动了技术的革命性进步。 作为世界上两大的重要经济体&#xff0…

Java程序之简单求和

题目&#xff1a; 求saaaaaaaaaaaa...a的值&#xff0c;其中a是一个数字。要求输入a的值和加数的个数n&#xff0c;例如&#xff1a;a2&#xff0c;n5&#xff0c;此时s222222222222222&#xff0c;输出s的值。 源代码&#xff1a; package Question5;import java.util.Scann…

LeetCode322.零钱兑换(一)

LeetCode刷题记录 文章目录 &#x1f4dc;题目描述&#x1f4a1;解题思路⌨C代码 &#x1f4dc;题目描述 给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount &#xff0c;表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。…