解决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 uaMatch源代码
Feb 14 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
vue项目实现多语言切换的思路
Sep 17 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无限分类的类
2007/01/02 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JavaScript中this详解
2015/09/01 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
详解node.js 事件循环
2020/07/22 Javascript
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
python 计算文件的md5值实例
2017/01/13 Python
python实现杨辉三角思路
2017/07/14 Python
python实现机器人行走效果
2018/01/29 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
监理资料员岗位职责
2014/01/03 职场文书
大专生自我评价
2014/01/28 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
python spilt()分隔字符串的实现示例
2021/05/21 Python
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL