程序员经验分享-hwhale

vue项目中如何设置ico图标

2023-11-15

在vue项目开发中往往会设计到浏览器头部图标的设置，这里分享一下自己在项目中的使用的方法，如有不足的地方还望指正，直奔主题：
1、首先如何制作ico图标，本人使用的是比特虫在线制作ico图标，使用方法很简单直接导入照片，输入生产码，点击生成ico图标按钮之后会自动生成并且下载，这里就不多说制作过程。
2、在vue项目中的index.html页面引入ico图标

<link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" />

需要注意的是我把生成的ico图标放入了 static静态文件夹中，是为了项目打包时会出现路径出错问题。
3、在项目中build文件夹下的webpack.dev.conf.js文件中新增一句代码：
在这里插入图片描述
4、在build文件夹下的webpack.prod.conf.js文件中添加一句代码：
在这里插入图片描述
再添加完成后使用:npm run dev重启项目即可。我的效果图如下：

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

vue项目中如何设置ico图标 的相关文章

随机推荐

  • 动手写docker中遇到的问题合集

    fork exec usr bin sh operation not permitted exit status 1 我的环境 win10 wsl2 ubuntu20 04 解决方案 设置wsl默认用户为root sudo nano etc

  • java实现赫夫曼树以及赫夫曼编码和解码（用byte[]）

    首先对于赫夫曼编码有个大概的理解 赫夫曼编码 Huffman Coding 又称霍夫曼编码 是一种编码方式 可变字长编码 VLC 的一种 Huffman于1952年提出一种编码方法 该方法完全依据字符出现概率来构造异字头的平均长度最短的码字

  • ubuntu搭载网络文件系统与linux开发板共享资源

    搭建NFS 如果ubuntu是运行在虚拟机上的 首先需要修改ubuntu与windows的网络连接模式 将其修为桥接模式与windows连接网络 ubuntu以及开发板安装net toos sudo apt install net tool

  • 常用设计模式-命令模式

    命令模式 讲一个请求封装成一个对象 可以让不同的请求对客户进行参数化 对请求排队或者记录请求日志 以及支持可撤销的操作 别名为事务模式或者动作模式 这样两者之间通过命令对象进行沟通 这样方便将命令对象进行储存 传递 调用 增加与管理 命令模

  • QFile创建文件以及递归文件删除文件

    QFile创建文件 1 t dir mkpath t firstFilePath 创建文件夹 2 t File open QIODevice WriteOnly QIODevice Truncate 创建文本 3 若文件不存在会创建一个 Q

  • mybatis-plus入坑指南

    简介 MyBatis Plus 简称 MP 是一个 MyBatis 的增强工具 在 MyBatis 的基础上只做增强不做改变 为简化开发 提高效率而生 特性 无侵入 只做增强不做改变 引入它不会对现有工程产生影响 如丝般顺滑 损耗小 启动即

  • python用matplotlib画折线图

    折线图 import matplotlib pyplot as plt y1 10 13 5 40 30 60 70 12 55 25 x1 range 0 10 x2 range 0 10 y2 5 8 0 30 20 40 50 10

  • java设计模式--[创建模式]--抽象工厂[abstract factory]

    抽象工廠 提供一個接口 用於創建相關或依賴對象的家族 而不需要指定具體類 二 設計某些系統是坷以南非要為用戶提供一系列相關的的對象 但系統不希望用戶真接使用new 運算符實例化這些對象 而由系統來控制這些對象的創建 否則用戶不僅要清楚地知道

  • 推荐系统架构

    推荐系统架构 实际推荐系统通常采用多种推荐算法 并根据用户的实时行为反馈调整用户的特征向量 特征的加权系数 进而融合各个推荐算法的推荐结果 在此基础上过滤不要的推荐项 最后结合用户使用场景调整推荐结果排名 给出最终推荐结果 基于不同特征的推

  • STM32F030 USART2配置函数 波特率不对导致无法进入中断

    今天调试STM32F030 USART2 收发不了数据 仿真的时候进入不了中断 但是配置也是正确的 搞了很久 原因是先初始化的串口再初始化Flash数据 导致读入的波特率是0 进而无法正常使用USART2 浪费了大量的时间 血的教训呀 vo

  • 【保姆级教学】搭建win10系统 IIS Web 服务器（上）

    先确认计算机上是否已安装 IIS 1 进入Windows10的控制面板 点击 系统和安全 2 找到 管理工具 并点击 3 查看是否有Internet Information Services IIS 管理器 如图 我的计算机已经安装好了 注

  • Python——Numpy高级索引

    Python Numpy高级索引 整数数组索引 或 与索引数组组合 布尔索引 比较运算符 取补运算符号 np iscomplex 过滤非复数元素 花式索引 传入顺序 倒序索引数组 使用 np ix 传入多个索引数组 https editor

  • MySQL——MySQL的介绍、安装、卸载与使用

    1 介绍 MySQL数据库隶属于MySQL AB公司 总部位于瑞典 后被oracle公司收购 优点 成本低 开放源码 可免费使用 性能高 执行很快 简单 容易安装和使用 DBMS分为两类 基于共享文件系统的DBMS Access 基于客户机

  • torch.max函数比较最大值

    新建两个tensor列表 利用torch max 进行两个列表的比较 import torch a torch tensor 1 2 3 4 5 print a a b torch tensor 10 1 7 9 3 print b b x

  • 认识HTTP请求

    要分析HTTP请求和响应必然少不了抓包工具 关于抓包工具的设置和下载推荐看抓包工具Fiddler的下载与设置 通过抓包得到的一个HTTP请求 HTTP请求的格式 结构分析 一 请求行 1 post是方法 可以表示一条HTTP请求要进行的操作

  • elementui的el-input校验正则表达式

    el input 只能输入正整数 包括0 在 Input 值改变时触发 handleEdit e let value e replace d g 只能输入数字 value value replace 0 d 1 第一位0开头 0后面为数字

  • 前后端分离之Springboot

    这里写目录标题 springboot后台搭建 1 创建父项目 1 1 创建netseal 2 创建子项目 2 1 创建webserver 2 2 创建common 3 正式编码 3 1 修改pom文件 3 1 1 netseal的pom x

  • 三色标记-垃圾收集器底层算法

    三色标记 文章目录 三色标记 前言 一 三色标记是什么 二 三色的介绍 1 黑色 2 灰色 3 白色 三 浮动垃圾 四 读写屏障 四 总结 前言 三色标记相信大家也有所耳闻 但是都没有过深入的了解 小编在之前和同事交流的过程中 了解到很多大

  • Struts2 入门案例——基于Struts2 任意两数据的代数和

    基于Struts2 任意两数据的代数和 问题 设计一个简单的 Web 程序 其功能是让用户输入两个整数 并提交给 Action 在 Action 中计算两个数的代数和 如果代数和为非负数 则跳转到 ch11 1 Positive jsp 页

  • vue项目中如何设置ico图标

    在vue项目开发中往往会设计到浏览器头部图标的设置 这里分享一下自己在项目中的使用的方法 如有不足的地方还望指正 直奔主题 1 首先如何制作ico图标 本人使用的是比特虫在线制作ico图标 使用方法很简单直接导入照片 输入生产码 点击生成i

热门标签