Vue-cli脚手架搭建的项目如何使用网页图标

Dear 丶 2023-06-16 07:50 60阅读 0赞

注意图标格式为.ico 、直接命名为favicon.ico  
在 HTML 页面 添加  
`<link rel="icon" type="image/x-icon" href="favicon.ico"/>`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70]  
使用 Vue-cli 搭建的项目需要添加代码在下面如图位置添加代码

favicon: './favicon.ico'

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 1]  
再重新启动项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191125095446210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019112509534212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191125100341154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，60人围观）

还没有评论，来说两句吧...

相关阅读

相关搭建的springboot项目如何访问静态资源

SpringBoot中默认是不开放静态资源的 application.properties配置文件中加上如下配置开放静态资源访...

骑猪看日落/ 2024年04月18日 14:25/ 0 赞/ 103 阅读

相关【Vue】day03-VueCli（脚手架）

day03 一、今日目标 1.生命周期 1. 生命周期介绍 2. 生命周期的四个阶段 3. 生命周期钩子 4. 声明周期案例 2.综合案例-小黑记

布满荆棘的人生/ 2024年03月18日 00:32/ 0 赞/ 153 阅读

相关 Vue-cli脚手架搭建的项目如何使用网页图标

注意图标格式为.ico 、直接命名为favicon.ico 在 HTML 页面添加 `<link rel="icon" type="image/x-icon" hre

Dear 丶/ 2023年06月16日 07:50/ 0 赞/ 61 阅读

相关 vuecli脚手架目录介绍

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小鱼儿/ 2023年01月23日 09:59/ 0 赞/ 43 阅读

相关 VueCli 脚手架详解（从安装到实际运用）

Cli是什么？是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）

小咪咪/ 2022年12月27日 01:56/ 0 赞/ 310 阅读

相关 vuecli脚手架配置文件说明

vuecli脚手架座右铭：越努力越幸运，越运动越健康。热爱计算机技术，热爱运动的这样一个人 -------------------- 文章目录 vuec

快来打我*/ 2022年12月23日 11:29/ 0 赞/ 283 阅读

相关使用VueCLI脚手架创建项目

\\VueCLI脚手架创建项目安装脚手架 \[VueCLI官网\] (https://cli.vuejs.org/zh/guide/installatio

素颜马尾好姑娘i/ 2022年11月21日 09:58/ 0 赞/ 431 阅读

相关 uniapp项目如何使用字体图标

第一步，把font文件放到static文件夹下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

快来打我*/ 2022年10月23日 11:12/ 0 赞/ 302 阅读

相关网页使用SVG图标

<html> <style> .logo{ background-repeat:no-repeat; background-i

浅浅的花香味﹌/ 2022年05月28日 14:07/ 0 赞/ 281 阅读

相关 vue脚手架搭建的目录结构

![这里写图片描述][70] -------------------- 一级目录 build: webpack配置相关的目录 config webpack

向右看齐/ 2022年05月20日 06:04/ 0 赞/ 153 阅读