vue小图标favicon不显示怎么办

小云云
Lepaskan: 2018-02-08 13:33:53
asal
2412 orang telah melayarinya

vue脚手架虽然好用,但是文件配置问题一直很头疼。本文主要和大家介绍vue小图标favicon不显示的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

将原生的代码用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' 
  })
Salin selepas log masuk

添加完代码是这样的:

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


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

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

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

相关推荐:

两种JS实现Input里添加小图标的方法

前端处理小图标的技巧分享

iconfont字体图标和各种css小图标的详解

Atas ialah kandungan terperinci vue小图标favicon不显示怎么办. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!