美文网首页我爱编程
使用VUE框架,icon不显示的问题

使用VUE框架,icon不显示的问题

作者: yguang94 | 来源:发表于2018-06-11 11:31 被阅读0次
将原生的代码用vue框架来做,出现种种问题,之前设置小图标的时候也出现了问题,总结了网上的解决方案,在此记下对我亲自试验并奏效的方案

前提是favico.ico放到根目录(就是src同级的目录),与原生代码不同的是还需要在build/webpack.dev.conf.js文件配置:

1.webpack.dev.conf.js文件里plugins里加入这段代码: favicon: './favicon.ico'

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

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

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

3.修改完配置文件需要重新npm run dev才可以奏效

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

相关文章

  • 使用VUE框架,icon不显示的问题

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

  • iview 打包Icon不显示问题修复

    iview 打包不显示问题修复 最近使用iviewUI框架开发应用,打包完成之后访问,发现所有的icon都报错不显...

  • wx.showToast

    icon的使用 icon主要有三种,success,loading和none 显示成功图标 显示加载图标 不显示图...

  • vue-各种兼容问题

    使用vue框架在ios里面返回白屏问题记录

  • 2018-11-28 vue项目总结

    1.js精度的问题 2.vue框架的使用 1.尽量用虚拟dom渲染页面,不直接使用dom() 2.template...

  • vue使用icon

    从https://www.iconfont.cn选择需要的icon将icon添加至购物车点击购物车下载代码 解压到...

  • vue移动端项目搭建

    使用框架:vue 使用插件:vue-cli,vue-loader,axios ,px2rem 使用UI框架:min...

  • vue beauty 离线Icon图标不显示问题

    首先吐槽下这个框架,不是主流框架,遇到的bug在网上查资料很难找到,还是用element ui等主流框架吧 今天项...

  • web前端开发高级

    前端高效开发框架技术与应用 Vue 基础Vue 框架简介 MVX 模式介绍Vue 框架概述如何使用 Vue.js ...

  • 3.4 Vue的使用

    3.4 Vue的使用 问题一:如何接入 Vue 框架? 目前最成熟和流行的开发 Vue 项目的方式是采用 ES6 ...

网友评论

    本文标题:使用VUE框架,icon不显示的问题

    本文链接:https://www.haomeiwen.com/subject/rdgceftx.html