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

站长资源 2024/11/25 佚名

2 0 1

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

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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“vue小图标favicon不显示的解决方案”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

2024年11月25日