当前位置: 首页 > 编程笔记 >

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

欧镜
2023-03-14
本文向大家介绍vue小图标favicon不显示的解决方案,包括了vue小图标favicon不显示的解决方案的使用技巧和注意事项,需要的朋友参考一下

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' 
  })

添加完代码是这样的:

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的路径就可以。)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Vue elementui字体图标显示问题解决方案,包括了Vue elementui字体图标显示问题解决方案的使用技巧和注意事项,需要的朋友参考一下 问题如下 在build/utils.js下找到 加上 publicPath: '../../'        运行项目还是不行 ,Failed to decode downloaded font: http://192.168.11.1

  • 本文向大家介绍解决Vue 项目打包后favicon无法正常显示的问题,包括了解决Vue 项目打包后favicon无法正常显示的问题的使用技巧和注意事项,需要的朋友参考一下 在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问

  • 本文向大家介绍BootStrap glyphicon图标无法显示的解决方法,包括了BootStrap glyphicon图标无法显示的解决方法的使用技巧和注意事项,需要的朋友参考一下 如果不注意bootstrap引入css和fonts的规范,则可能会导致bootstrap 在显示glyphicon图标时无法正常显示,显示为方框。 此时可搜索bootstrap.css中的.glyphicon,可发现

  • 本文向大家介绍解决vue 项目引入字体图标报错、不显示等问题,包括了解决vue 项目引入字体图标报错、不显示等问题的使用技巧和注意事项,需要的朋友参考一下 问题:在项目开发时使用字体图标,发现两个问题; 1、出现报错: 解决方法为:把字体引入方式改为绝对路径 2、不报错,但是不显示图标字体,出现方框 原因可能有两种: ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解

  • 本文向大家介绍Pyecharts地图显示不完成问题解决方案,包括了Pyecharts地图显示不完成问题解决方案的使用技巧和注意事项,需要的朋友参考一下 官网给的解释如下: 自从 0.3.2 开始,为了缩减项目本身的体积以及维持 pyecharts 项目的轻量化运行,pyecharts 将不再自带地图 js 文件。 如用户需要用到地图图表,可自行安装对应的地图文件包。 全球国家地图: echarts

  • 本文向大家介绍解决matplotlib库show()方法不显示图片的问题,包括了解决matplotlib库show()方法不显示图片的问题的使用技巧和注意事项,需要的朋友参考一下 最近使用python里的matplotlib库绘图,想在代码结束时显示图片看看,结果图片一闪而过,附上我原来代码: 我上网查了一下,在遇到show()方法无法显示图片或者图片一闪而过,解决方案分两步: 1.加头文件,完整