解决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 相关文章推荐
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
对node.js中render和send的用法详解
May 14 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
python实现的文件同步服务器实例
2015/06/02 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
工商管理专业自荐信
2014/06/03 职场文书
工作失职检讨书500字
2014/10/17 职场文书
基层党组织整改方案
2014/10/25 职场文书
离婚协议书范文
2015/01/26 职场文书
学期个人自我总结
2015/02/13 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
家长通知书家长意见
2015/06/03 职场文书
警示教育片观后感
2015/06/17 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
Python测试框架pytest高阶用法全面详解
2022/06/01 Python