脚本宝典收集整理的这篇文章主要介绍了vue.js中怎么添加favicon图标,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue.js添加favicon图标的方法:1、修改【index.htML】文件,代码为【<link rel="shortcut icon" tyPE="image/x-icon" href="favico】;2、修改webpack配置文件。
本教程操作环境:windows10系统、vue2.9,本文适用于所有品牌的电脑。
【相关文章推荐:vue.js】
vue.js添加favicon图标的方法:
方法一:修改index.html文件
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
缺点:打包后需要将favicon.ico
复制到根目录
方法二:修改webpack配置文件
1、找到build下的webpack.dev.conf.js文件
new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, favicon: path.resolve('favicon.ico') // 新增 }),
2、找到build下的webpack.PRod.conf.js文件
new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, favicon: path.resolve('favicon.ico'), //新增 minify: { emoveComments: true, collapseWhITespace: true, removeAttributeQuotes: true ... }),
方法三 :vue项目打包后favicon无法正常显示
解决方法:
在webpack.prod.config.js中的HtmlWebpackPlugin插件选项中配置favicon选项,其中favicon的路径是个相对路径
new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', favicon: 'src/assets/img/favicon.ico', inject: true }),
修改配置文件后需重启npm run dev
打包后根目录下就会有favicon.ico
相关免费学习推荐:JavaScript(视频)
以上就是vue.js中怎么添加favicon图标的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的vue.js中怎么添加favicon图标全部内容,希望文章能够帮你解决vue.js中怎么添加favicon图标所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。