vue小图标favicon不显示的解决方案


Posted in Javascript onSeptember 19, 2017

vue脚手架虽然好用,但是文件配置问题一直很头疼。

将原生的代码用vue框架来做,出现种种问题,之前设置小图标的时候也出现了问题,总结了网上的解决方案,在此记下对我亲自试验并奏效的方案:

我是直接将favico.ico丢到根目录(就是src同级的目录),然后进行在build/webpack.dev.conf.js文件配置

1.webpack.dev.conf.js文件里plugins里加入这段代码

new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true,
   favicon: './favicon.ico' 
  })

添加完代码是这样的:

vue小图标favicon不显示的解决方案

2.在index.html中引入代码:

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

3.修改完配置文件记得重新npm run dev才会奏效

关于谷歌浏览器不显示小图标: 是缓存问题,手动强制刷新一下试试(ctrl+F5)
注:( 也有把favicon放入static文件夹下的,因为我没有奏效,所以用了这个方法,如果放入static的话只要改一下favicon的路径就可以。)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
javascript中length属性的探索
Jul 31 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 #jQuery
前端把html表格生成为excel表格的实例
Sep 19 #Javascript
基于js中的原型(全面讲解)
Sep 19 #Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 #Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 #Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 #Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 #Javascript
You might like
PHP 存储文本换行实现方法
2010/01/05 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python多线程编程简单介绍
2015/04/13 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
大学生的创业计划书就该这么写
2014/01/30 职场文书
北体毕业生求职信
2014/02/28 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
高一语文教学反思
2016/02/16 职场文书
golang正则之命名分组方式
2021/04/25 Golang