vue项目配置favicon图标

最新推荐文章于 2024-04-06 20:10:36 发布
最新推荐文章于 2024-04-06 20:10:36 发布
阅读量748 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/j244233138/article/details/106528500
版权

大家每次看到的网站都有一个小的logo
在这里插入图片描述
这是favicon图标
在vue中我们先要 安装插件

npm i --save-dev html-webpack-plugin

安装完成后 我们要在配置文件中配置一下前提是有ico格式的图片
在这里插入图片描述
我图片是放在了外面同级

这是我们要配置一下开发环境
在这里插入图片描述
在这里插入图片描述
路径是根据我放图片的位置写的 后面就是配置生产环境 也是一样的
在这里插入图片描述
打包生成的文件图片因为我放在了最外层 所有生成出来会和index同级
在这里插入图片描述
这时部署完项目就OK了
在这里插入图片描述

Mr_wuying
关注
专栏目录
Vue项目设置favicon
JavaStudy的博客
09-18 1310
vue-cli搭建的vue项目里面已经有了一个static文件夹，用于存放静态文件。 一、将favicon图片放到该文件夹下，然后再index.html中添加： <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico"> 刷新浏览器就会更新。 二、如果没有效果，则查看你的build文件夹下：build/webpack.dev.conf.js中： new HtmlWebpackPlugin({ fi
2024年前端最全Typora设置高亮，前端驱动面试
最新发布
2401_84619467的博客
05-06 610
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
vue项目中配置favicon图标
热门推荐
xm2by的博客
08-15 1万+
vue项目中配置favicon图标 如上图所示，页面顶部的小图标会让页面显得高大上，一般把这种图标叫做favicon图标。利用vue-cli脚手架搭建的项目，如果不手动配置，页面中是不会显示favicon图标。 不配置是这样子的： favicon图标的配置也很简单，vue-cli默认帮我们安装了html-webpack-plugin（如果没有，可以自己npm安装），我们只需在html...
vue项目设置favicon
老徐的博客只有干货
10-16 507
1.准备一个favicon 放在项目的static文件夹下： 2.修改打包配置 开发环境 修改build/webpack.dev.conf.js，找到new HtmlWebpackPlugin配置项，增加favicon配置： 生产环境 修改build/webpack.prod.conf.js，具体修改同上。 ...
设置项目的favicon图标
wghnlq_mimang的博客
12-15 767
设置一个好的favicon,可以图标的方式区别不同的网站，还可以快速的找到自己的项目所在
vue小图标favicon不显示的解决方案
08-29
在 Vue 项目中，小图标 Favicon 不显示的原因可能有多种，例如： * Favicon.ico 文件路径错误 * Webpack 配置错误 * 缓存问题 三、解决方案 为了解决 Vue 小图标 Favicon 不显示的问题，我们可以采取以下步骤： ...
解决Vue 项目打包后favicon无法正常显示的问题
12-07
然而，在使用Vue.js框架构建项目时，可能会遇到打包后favicon图标无法正常显示的问题。这个问题通常与资源路径配置有关，尤其是在使用本地图片作为favicon时。下面将详细探讨问题的根源，以及提供一种可行的解决方案...
关于Vue项目中favicon.ico的应用配置&取消favicon.ico请求
daisymao0205的博客
12-15 6063
首先，一般把favicon.ico（固定命名）放在static里，如下图： 在开发环境中，配置webpack.dev.conf.js里的plugins newHtmlWebpackPlugin里加上 favicon:'./static/favicon.ico',相对路径 项目打包部署，便配置webpack.prod.conf.js里的plugins newHtmlWebpackPlugin里加上 favicon:'./static/favicon.ico',相对路径 ...
给vue项目添加favicon.ico图标
格の调
03-08 2208
效果如下： 操作步骤： 1、本地环境下的favicon.ico配置： 如上图的截图，如果本地环境不需要可不配置，但是配置完需要重新执行 npm run dev，如果执行此命令报错，说明下图所示的favicon地址配置不正确。 2、线上项目的favicon.ico配置： 配置完毕后重新执行：npm run build，重新打包。 在浏览器运行dist>index.html文件，即可看到效果。 ...
在vue项目中配置favicon图标
weixin_34290390的博客
01-22 508
配置favicon图标主要有两个位置。 1、开发环境： 路劲：C:\Users\JensonJin\Desktop\demo_v\build\webpack.dev.conf.js 找到：如下位置添加favicon及路径即可 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject...
Vue项目开发环境设置favicon
weixin_41283004的博客
05-25 590
1.将favicon.ico文件存放到项目根路径下； 2.配置webpack.dev.conf.js　　　　 new HtmlWebpackPlugin({ 　　filename: 'index.html', 　　template: 'index.html', 　　favicon: path.resolve('favicon.ico'), 　　inject: true })
vue 动态设置系统在浏览器中的标题title和图标favicon
宁静致远
04-06 1845
vue动态修改系统title和favicon
vue中添加favicon 图标 （3种方法）
IT博客技术分享
11-19 6820
首先将favicon.ico图片放在根目录下，通过以下两种方法使其显示正确。 方法一：修改index.html文件 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 缺点：打包后需要将favicon.ico复制到根目录 方法二：修改webpack配置文件 1、找到build下的webpack....
vue设置favicon.ico图标
Hoey的博客
03-17 1418
favicon.ico存放位置 将avicon.ico在根目录下 (与index.html放在同一级) 方式一 <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> 方式二 /build/webpack.dev.conf.js new HtmlWebpackPlugin({ filen...
vue:直接替换掉favicon.ico图标不生效/自定义图标不生效
m0_46370117的博客
10-20 8763
vue项目中直接用自己的图片替换掉favicon.ico，图标为什么不生效？ 在一般情况下：创建项目之后，默认的小图标是favicon.ico，我们想要自定义小图标只需要用新的图片替换掉favicon.ico即可，但是我直接替换掉favicon.ico并不生效： 是因为项目使用了@vue/cli-plugin-pwa插件，这个插件会更改网页标签图标的路径，所以导致我们的项目中多出来一个public/img/icons文件夹 官方解释： https://www.npmjs.com/package/@vue/
vue项目--favicon设置以及动态修改favicon(浏览器顶部小图标)
岁末zzz的博客
11-07 7322
动态更新favicon之前需要有一个默认的favicon。 项目里会有一个static文件夹或者其它文件夹，存放静态文件。 favicon图片放到该文件夹下。 然后再index.html中添加： vue-cli2.0 <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico"> vue-cli3.0 ...
vue 打包后favicon不生效
09-05
在vue项目中，favicon是指网站标题上显示的小图标。当我们使用vue-cli将项目打包后，往往会遇到favicon不生效的问题。 这个问题主要是由于favicon的路径不正确导致的。在vue项目中，favicon通常放在public文件夹下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值