解决Vue 项目打包后favicon无法正常显示的问题


Posted in Javascript onSeptember 01, 2018

在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法:

问题分析:

问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问题,出现问题的基本在使用本地图片作为favicon。

如下常规配置:

解决Vue 项目打包后favicon无法正常显示的问题

在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下,同时在index.html中正确配置favicon路径。

项目启动后会发现该中配置方式并没有生效:

解决Vue 项目打包后favicon无法正常显示的问题

打包后的项目同样存在问题。

(很抱歉的说,写到这里才发现我目前并没有解决本地无法添加favicon的问题,只是解决了打包后的问题)

项目打包后的文件会因为配置的不同出现多种情况。下面给出原因分析及一种可以的配置方式。

各种配置下出错原因:

经webpack打包后的Vue文件一般会出现两种变化:

1、文件被打包进各种js、css文件中

2、文件被拷贝进static目录下(处在项目根目录的static文件下),具体在何位置与原始路径有关

如果图片被压缩进js、css文件中就就不好办,所以下面将图片直接放在static文件下。

一种正确的配置方式:

1、图片在项目中的具体放置位置

解决Vue 项目打包后favicon无法正常显示的问题

2、打包后图片所在位置

解决Vue 项目打包后favicon无法正常显示的问题

3、根据生成后的图片路径配置index.html中favicon路径

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

4、如上配置便可实现预期效果

解决Vue 项目打包后favicon无法正常显示的问题

需要注意的是favicon有较严重的缓存情况,排除掉所有问题仍存在问题,试试清除缓存。

以上这篇解决Vue 项目打包后favicon无法正常显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
Ajax实现局部刷新的方法实例
Mar 31 Javascript
修改vue+webpack run build的路径方法
Sep 01 #Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 #Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 #Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 #Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 #Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 #Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 #Javascript
You might like
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
ThinkPHP之getField详解
2014/06/20 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
python如何获取服务器硬件信息
2017/05/11 Python
python enumerate内置函数用法总结
2020/01/07 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
python re模块和正则表达式
2021/03/24 Python
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
HR求职自荐信范文
2014/06/21 职场文书
2014年安全员工作总结
2014/11/13 职场文书
安徽导游词
2015/02/12 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技