记一次favicon.ico的折腾

news2024/11/25 12:58:59

某项目需要将前端和后台整合在一起 我也不知道为啥要整合 上面有要求就整呗

正常前端npm run build打包后 dist内会根据设置自动生成favicon.ico文件在根目录下
但由于前后端整合 需要打包后将图标放在dist下的static文件夹里

需要的效果 打包后 index.html里

<link rel="shortcut icon" href=./favicon.ico>

默认生成的是在dist根目录下
改成

<link rel="shortcut icon" href=./static/favicon.ico>

尝试自定义favicon打包路径 下载html-loader 分别试了0.55和0.54版本 均会报错 (可能是我本地依赖的原因)
webpack.base.conf.js里的rules 配置 url-loader和html-loader 正常情况下应该能实现换路径了 但我的不知道为啥就一直报错

后来采用 直接打包前在项目里的index.html中指定href=./static/favicon.ico 从static里获取
并且在webpack.prod.conf.js里的

new CopyWebpackPlugin([
      {
        from: './favicon.ico',
        to: ... static的代表变量
      }
    ])
  ],

单独指定一下favicon.ico存放的位置为static下

按上所示修改 会生成两个link标签 一个在staic下 一个在根目录下
将HtmlWebPackPlugin里的favicon:resolve(‘favicon.ico’)去掉即可
在这里插入图片描述

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

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

相关文章

0507华为od二面

只记录自己没回答上的问题 1、ZGC的缺点&#xff1a; 1)只是适用于32位系统 2)最大只是支持4TB内存容量 3)最糟糕的情况下吞吐量会下降15%&#xff0c;这都不是事至于吞吐量&#xff0c;通过扩容分分钟解决 4)分代的原因:不同对象的生命周期不相同&#xff0c;可能会扫描整个堆…

CSS-伪类选择器

结构伪类选择器 作用&#xff1a;根据元素的结构关系查找元素 分类&#xff1a; 选择器说明元素名:first-child查找第一个元素元素名:last-child查找最后一个元素元素名:nth-child(N)查找第N名元素 <!DOCTYPE html> <html lang"en"> <head><me…

VMware 替代专题|14 个常见问题,解读 VMware 替代的方方面面

随着 VMware by Broadcom 调整订阅模式和产品组合&#xff0c;不少用户也将 VMware 替代提上日程。为了帮助用户顺利完成从 VMware 替代方案评估到产品落地的一系列环节&#xff0c;我们通过这篇博客&#xff0c;对 VMware 替代场景下用户经常遇到的问题进行了梳理和解答。 更…

【Ansiable】ansible的模块和主机清单

Ansible Ansible是一个基于Python开发的配置管理和应用部署工具&#xff0c;现在也在自动化管理领域大放异彩。它融合了众多老牌运维工具的优点&#xff0c;Pubbet和Saltstack能实现的功能&#xff0c;Ansible基本上都可以实现。 Ansible能批量配置、部署、管理上千台主机。比…

2024年全域电商矩阵109节线上课

《24年全域电商矩阵109节线上课》是一门全面介绍电子商务领域的课程。从电子商务的基本概念到全球电子商务趋势&#xff0c;再到电子商务的营销策略和实际操作技巧&#xff0c;本课程涵盖了丰富多样的主题。学员将通过109节在线课程系统全面了解电子商务&#xff0c;并获得在这…

MCU做死循环时,到底应该用for(;;) 还是wihile(1)

MCU做死循环时 for while stm32中老工程师用forfor while背景for版本while版本正方观点&#xff1a;哪有好的编译器&#xff1a;反方观点&#xff1a;这种代码过时了工程师实地测试&#xff1a;和编译器和优化有关 建议还是用for参考 stm32中老工程师用for /* Start scheduler …

牛客网刷题 | BC80 奇偶统计

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 任意输入一个正整数…

python 打包为exe可执行程序

近期因为需要做文字识别&#xff0c;应用ocr 所以每次都需要部署环境&#xff0c;然后打算做成exe&#xff0c;遇到问题做一总结。 pyinstaller -D --hidden-importpaddleocr testflask.py 生成exe paddleocr 和pyinstaller 安装不做说明。 No such file or directory: …

STM32接入CH340芯片的初始化进入升级模式(死机)问题处理

目录 1. 问题描述2. 问题分析2.1 CH340G/K 的初始化波形2.2 第1种USB升级电路2.3 第2种USB升级电路2.4 第3种USB升级电路2.5 第4种USB升级电路 3. 总结 1. 问题描述 我所用的CH340G&#xff08;CH340K也用过&#xff09;接在MCU的电路中&#xff0c;在插入CH340G/K 的接插件&a…

欢迎参展GASITC2024成都国际城市燃气智能应用技术展

GASITC2024中国&#xff08;成都&#xff09;国际城市燃气智能应用技术展览会 2024China City Gas Intelligent Application Technology Exhibition 同期召开&#xff1a;第十五届&#xff08;成都&#xff09;国际化工技术及装备展览会 展出地点&#xff1a;成都世纪城新国…

Vue CLI配置代理、2.0、3.0

一、vue cli2.0 代理配置 proxy: {/api:{target: "http://localhost:8067",pathRewrite: {/api: }}, } 一、vue cli3.0 代理配置 proxy: {/api: {target: http://localhost:8067,pathRewrite: {/api: }} }

OSPF链路状态数据库

原理概述 OSPF是一种基于链路状态的动态路由协议&#xff0c;每台OSPF路由器都会生成相关的LSA&#xff0c;并将这些LSA通告出去。路由器收到LSA后&#xff0c;会将它们存放在链路状态数据库LSDB中。 LSA有多种不同的类型&#xff0c;不同类型的LSA的功能和作用是不同的&…

YOLOv8的训练、验证、预测及导出[目标检测实践篇]

这一部分内容主要介绍如何使用YOLOv8训练自己的数据集&#xff0c;并进行验证、预测及导出&#xff0c;采用代码和指令的两种方式&#xff0c;参考自官方文档&#xff1a;Detect - Ultralytics YOLOv8 Docs。实践篇不需要关注原理&#xff0c;只需要把流程跑通就行&#xff0c;…

【Mac】LRTimelapse 6(延迟摄影编辑渲染软件) v6.5.4安装汉化教程

软件介绍 LRTimelapse 6 for Mac是一款专业的时间轴摄影和时间堆栈软件&#xff0c;它被广泛用于创建流畅的时间轴视频&#xff0c;适用于风光摄影、延时摄影和其他类型的摄影项目。它与Adobe Lightroom和Adobe Camera Raw完美集成&#xff0c;可以在Lightroom中编辑和处理RAW…

iOS xib布局

1.多次启动发现启动图和截屏的图片不一致,设置launch storyboard 不能到顶部 https://blog.csdn.net/u011960171/article/details/104053696/ 2.multipiler是比例&#xff0c;需要控制顺序1.视图&#xff0c;2父视图&#xff0c;选择宽度比例&#xff0c;默认是1 3.Aspect R…

如何开发自己的深度学习优化算法

深度学习优化算法 如何开发自己的深度学习优化算法理解优化算法的基础**核心组件**&#xff1a; 设计自定义优化算法的步骤**步骤 1: 定义问题和目标****步骤 2: 研究现有算法****步骤 3: 开发初步想法****步骤 4: 创建原型****步骤 5: 系统测试与优化** 关键建议 如何开发自己…

WMS仓储管理系统库存分类的详细讲解

在当今日益复杂和快速变化的商业环境中&#xff0c;仓库管理成为了一个企业不可或缺的关键环节。WMS仓储管理系统解决方案凭借其自动化和信息化的优势&#xff0c;为企业带来了革命性的改变&#xff0c;特别是在库存分类方面。接下来&#xff0c;我们将深入探讨WMS仓储管理系统…

下载源代码并交叉编译riscv FreeBSD系统和内核

RISCV系统曾经让人神秘到无法接触&#xff0c;交叉编译更是只有耳闻&#xff0c;现在随着RISCV的普及&#xff0c;它们神秘的面纱已经被慢慢揭开。 交叉编译作为RISCV系统中的一个重要环节&#xff0c;也随着RISCV的普及而变得更加容易理解和操作。交叉编译允许开发者在一个平…

AI数据中心网络技术选型,InfiniBand与RoCE对比分析

InfiniBand与RoCE对比分析&#xff1a;AI数据中心网络选择指南 随着 AI 技术的蓬勃发展&#xff0c;其对数据中心网络的要求也日益严苛。低延迟、高吞吐量的网络对于处理复杂的数据密集型工作负载至关重要。本文分析了 InfiniBand 和 RoCE 两种数据中心网络技术&#xff0c;帮助…

4步快速配置Java、MySQL、Maven环境(windows)

每次入职一家新公司或者用一台其他的临时电脑或者新电脑时都要重新配置Java开发环境&#xff0c;很麻烦&#xff0c;因此我在这里记录一下快速配置环境的方式&#xff0c;四步搞定&#xff01;此处以win为操作系统进行讲解。 第一步&#xff1a;下载链接 下载链接&#xff1a…