记一次favicon.ico的折腾

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

正常前端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.hqwc.cn/news/688995.html

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

相关文章

LVS的三种工作模式---(DR/TUN/NAT)

目录 一、NAT模式&#xff08;LVS-NAT&#xff09; 二、IP隧道模式&#xff08;LVS-TUN&#xff09; 三、DR模型--直接路由模式&#xff08;LVS-DR&#xff09; LVS/DR模式ARP抑制 原因&#xff1a; LVS的DR工作模式及配置&#xff1a; LVS的NAT工作模式及配置&#xff1…

基于springboot实现贸易行业crm系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现贸易行业crm系统演示 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了基于springboot的贸易行业crm系统的开发全过程。通过分析基于springboot的贸易行业crm系统管理的不足&#xff0c;创建…

Redis如何避免数据丢失?——RDB

目录 1. RDB机制的配置 2. fork()函数和写时复制(Copy On Write&#xff09; 什么是Copy On Write 系统fork中使用Copy On Write机制 3. RDB文件结构 RDB文件内容和内容顺序 InfoAuxFields是rdb信息数据 数据库数据 数据 数据存储格式 字符串编码 操作码 4. RDB的2…

物联网SCI期刊,潜力新刊,审稿速度快,收稿范围广泛!

一、期刊名称 Internet of Things 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;物联网 影响因子&#xff1a;5.9 中科院分区&#xff1a;3区 出版方式&#xff1a;订阅模式/开放出版 版面费&#xff1a;选择开放出版需支付$2310 三、期刊征稿范围 I…

WorkPlus im(即时通讯)集成平台助力政企数字化转型升级

随着互联网技术的不断发展&#xff0c;企业内部通讯软件已经成为企业日常运营中不可或缺的一部分。企业IM&#xff08;即时通讯&#xff09;和移动门户作为企业内部通讯软件的关键组成部分&#xff0c;为企业提供更加高效、便捷的通讯方式&#xff0c;提高了企业的运营效率。 针…

设计软件有哪些?渲染软件篇(4),渲染100邀请码1a12

除了之前介绍的一些渲染软件&#xff0c;这次我们继续介绍。 1、渲染100(http://www.xuanran100.com/?ycode1a12) 渲染100是网渲平台&#xff0c;为设计师提供高性能的渲染服务。通过它设计师可以把本地渲染移到云端进行&#xff0c;速度快价格便宜&#xff0c;支持3dmax、v…

第一步->手撕spring源码之Bean容器创建

什么是bean容器 可以存放数据的具体数据结构实现&#xff0c;都可以称之为容器。例如&#xff1a;ArrayList、LinkedList、HashSet等。bean就是对象的定义 spring中bean的多样性需要区分就需要用到键值索引的场景 故选择 HashMap。 什么是hashMap&#xff1f; HashMap 是一种基…

从入门到深入理解——栈

一、栈的定义 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除 操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09; 的原则。 压栈&#x…

《2024年AI安全报告》:AIML工具使用量飙升594.82%

人工智能&#xff08;AI&#xff09;不仅仅是一种开拓性的创新技术&#xff0c;甚至已经成为一种常态&#xff0c;企业正在工程、IT营销、财务、客户服务等领域迅速采用AI和机器学习&#xff08;ML&#xff09;工具。但与此同时&#xff0c;他们必须平衡AI工具带来的诸多风险&a…

SpringBootWeb 篇-深入了解请求响应(服务端接收不同类型的请求参数的方式)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 请求响应概述 1.1 简单参数 1.2 实体参数 2.3 数组集合参数 2.4 日期参数 2.5 json 参数 2.6 路径参数 3.0 完整代码 1.0 请求响应概述 当客户端发送不同的请求参…

整除C++

题目&#xff1a; 思路&#xff1a; 循环遍历7(可以被 7 整除的正整数最小为7)~n&#xff0c;如果i%70&#xff0c;就说明i可以被7整除. 代码&#xff1a; #include<iostream> using namespace std; int n;//一个正整数 int main(){scanf("%d",&n);//输入…

OIDC 与 OAuth2.0学习

OpenID Connect (OIDC) 和 OAuth 2.0 是两种不同的协议&#xff0c;它们通常一起使用&#xff0c;但服务于不同的目的。下面是它们的 主要区别和联系&#xff1a; OAuth 2.0 OAuth 2.0 是一个授权框架&#xff0c;它允许第三方应用代表用户获取对服务器资源的有限访问权限。…