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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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', t

  • vue+elementUi 实现密码显示/隐藏+小图标变化功能

    vue+elementUi 实现密码显示/隐藏+小图标变化(js一共三行代码,其中一行为了美观)...,先给大家展示下效果图,感觉不错可以参考实现代码. [效果图] [html] // 前后代码[略] <el-form-item label="密码" prop="pwd"> <el-input v-model="ruleForm.pwd" :type="pwdType" placeholder="请

  • vue 中url 链接左边的小图标更改问题

    修改url左边的小图标(标题前的小图标).例如: favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo. 1.首先得到或生成需要的ico文件.ps ico文件生成地址 http://bitbug.net/ 2.将生成的文件置于static文件夹下(可自行存放) 3.在index.html中,title下写入: <link rel="icon" href="./static/刚刚生成.ico的地址" re

  • Android Studio用genymotion运行后小图标无法显示问题

    提出问题 我做的是一个通讯录,用到了选项菜单,每一个菜单项左边我都添加了一个小图标,运行后发现没有显示出来. 解决方案 利用反射机制,根据对象来寻找类,再根据类来找方法,在显示菜单选项的Activity中复写onMenuOpened方法: @Override public boolean onMenuOpened(int featureId, Menu menu) { if(menu!=null){ if(menu.getClass().getSimpleName().equalsIgnoreC

  • 解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题

    假设你已经知道如何引入vue-quill-editor,并且遇到了跟我一样的问题(如上图),显示出来的图标排列不整齐,字体,文字大小选择时超出边框.你可以试试下面这种解决办法 . 在使用文本编辑器的vue页面中引入vue-quill-editor中的样式. @import "../../node_modules/quill/dist/quill.snow.css"; 然后在组件中添加class名 -- class="ql-editor". <quill-edi

  • vue页面图片不显示问题解决方案

    vue页面图片不显示问题解决方案

    在做新版组态界面的时候,用vue框架实现,在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来 现象: network页面资源也不报错,而且状态码竟然还是200,点preview里面又什么都没有,后面一输入,发现随便输入什么字都是出现的200 解决办法: 在webpack里面配置静态资源的路径 1.找到vue.config.js 2.在module.exports下面的devServer里面添加一个键 contentBase:path.join(_dirname,'s

  • vue实现拖拽小图标

    如何给vue项目里面写拖拽悬浮小图标呢,供大家参考,具体内容如下 首先 1.html文件 一定要给父盒子一个ID <div       class="xuanfu"       id="moveDiv"       @mousedown="down()"       @touchstart="down()"       @mousemove.prevent.stop="move()"       @t

  • Bootstrap3 多个模态对话框无法显示的解决方案

    Bootstrap3 多个模态对话框无法显示的解决方案

    今天帮同事调了一个代码,他们的项目最近在用Bootstrap做开发,突然间,他遇到了一个奇怪的问题,如果一个页面中,有多个Modal对话框的话,排列在第一个的对话框,能够正确显示,第二个,只能导致页面出现MASK层,却不能显示Dialog. 如果调整顺序,仍然是第一个能显示,第二个只有页面变暗.效果如下: 第一个,正常弹出的Dialog 第二个无法弹出,只是页面变暗的dialog 而两个dialog的代码是完全一致的,具体的代码如下: <div class="modal fade"

  • vue.js 左侧二级菜单显示与隐藏切换的实例代码

    废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type

  • Vue.js 点击按钮显示/隐藏内容的实例代码

    实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

随机推荐