vue项目设置favicon

最新推荐文章于 2024-05-06 16:38:25 发布
最新推荐文章于 2024-05-06 16:38:25 发布
阅读量587 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # Vue实战 文章标签： vue.js javascript favicon
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/IndexMan/article/details/120801328

1.准备一个favicon.ico

放在项目的static文件夹下：
在这里插入图片描述

2.修改打包配置

开发环境

修改build/webpack.dev.conf.js，找到new HtmlWebpackPlugin配置项，增加favicon配置：
在这里插入图片描述

生产环境

修改build/webpack.prod.conf.js，具体修改同上。

vue 动态设置系统在浏览器中的标题title和图标favicon
宁静致远
04-06 2704
vue动态修改系统title和favicon
vue项目中配置favicon图标
xm2by的博客
08-15 1万+
vue项目中配置favicon图标 如上图所示，页面顶部的小图标会让页面显得高大上，一般把这种图标叫做favicon图标。利用vue-cli脚手架搭建的项目，如果不手动配置，页面中是不会显示favicon图标。 不配置是这样子的： favicon图标的配置也很简单，vue-cli默认帮我们安装了html-webpack-plugin（如果没有，可以自己npm安装），我们只需在html...
Vue项目设置favicon
JavaStudy的博客
09-18 1395
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 873
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
vue favicon设置以及动态修改favicon的方法
12-07
目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。 favicon图片放到该文件夹下。 然后再index.html中添加： <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" ...
解决Vue 项目打包后favicon无法正常显示的问题
12-07
在Vue项目中，常见做法是将favicon.ico文件与index.html文件一同放在项目根目录下，并在index.html中正确设置引用路径。然而，这种配置在项目启动或打包后往往无法生效。 Vue项目经过webpack打包后，文件结构会发生...
vue小图标favicon不显示的解决方案
08-29
在 Vue 项目中，小图标 Favicon 不显示的原因可能有多种，例如： * Favicon.ico 文件路径错误 * Webpack 配置错误 * 缓存问题 三、解决方案 为了解决 Vue 小图标 Favicon 不显示的问题，我们可以采取以下步骤： ...
vue中添加favicon 图标 （3种方法）
IT博客技术分享
11-19 7040
首先将favicon.ico图片放在根目录下，通过以下两种方法使其显示正确。 方法一：修改index.html文件 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 缺点：打包后需要将favicon.ico复制到根目录 方法二：修改webpack配置文件 1、找到build下的webpack....
Vue项目开发环境设置favicon
weixin_41283004的博客
05-25 633
1.将favicon.ico文件存放到项目根路径下； 2.配置webpack.dev.conf.js　　　　 new HtmlWebpackPlugin({ 　　filename: 'index.html', 　　template: 'index.html', 　　favicon: path.resolve('favicon.ico'), 　　inject: true })
vue项目配置favicon图标
Mr_wuying的博客
06-03 821
大家每次看到的网站都有一个小的logo 这是favicon图标 在vue中我们先要 安装插件 npm i --save-dev html-webpack-plugin 安装完成后 我们要在配置文件中配置一下前提是有ico格式的图片 我图片是放在了外面同级 这是我们要配置一下开发环境 路径是根据我放图片的位置写的 后面就是配置生产环境 也是一样的 打包生成的文件图片因为我放在了最外层 所有生成出来会和index同级 这时部署完项目就OK了 ...
vue项目--favicon设置以及动态修改favicon（网站顶头的.icon小图标）
热门推荐
muzidigbig的博客
05-29 3万+
favicon图标的制作请看我前面的文章：https://blog.csdn.net/muzidigbig/article/details/80492902 favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置， 目前主要的浏览器都支持favicon.ico图标. 目前vue-cli搭建的vue项目里面已经有了一个s...
vue项目添加favicon的几种方式
高先生的猫
04-08 3243
一、 在public下放置favicon.ico文件 浏览器会自动爬去根目录的favicon.ico文件，然后自动呈现 二、在index.html入口文件添加 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 当然也可以添加其他类型的网址图标，如：png图标 <link rel="shortcut icon" type="image/png" href="favicon.png"/>..
Vue的favicon设置，打包生产开发条件下均可
Dreamy_LIN的博客
07-10 1580
主要是模仿了vue-cli的方式，第一步，将favicon.ico放在static目录下，通过vue-cli 的拷贝插件copy-webpack-plugin，打包后将生成在dist/static的目录下。第二步，修改打包前的index.html，在head里引入favicon.ico，如下，之后运行起来就可以看到了。 <link rel="icon" href="/static/favicon.ico" type="image/x-icon"> 不用vue-cli的话，自己配置拷贝插
vue中添加favicon.ico
weixin_33836223的博客
03-15 392
1、首先将favicon.ico图片放在根目录下 2、修改webpack配置文件 1）找到build下的webpack.dev.conf.js文件 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, favicon: path.resolve('favico...
favicon.ico 怎么加在vue的项目中
servepeople的博客
08-29 1376
这个图标通常是网站的标识性图像，可以帮助用户更容易地识别和区分不同的网站。它可以是网站的标志、图标或其他与网站相关的图像。如果没有找到该文件，浏览器可能会使用默认的图标，或者不显示图标。如果浏览器仍然显示旧的图标，可能是因为浏览器缓存了之前的图标。请注意，不同浏览器可能在刷新缓存方面有不同的行为，所以如果你无法立即看到变化，可能需要进行更多的操作。如果你的项目正在运行，停止运行并重新启动项目，以便浏览器加载新的。
vue-cli3中配置favicon图标
weixin_43837268的博客
06-30 1943
vue.config.js中设置 module.exports = { pwa: { iconPaths: { favicon32: 'favicon.ico', favicon16: 'favicon.ico', appleTouchIcon: 'favicon.ico', maskIcon: 'favicon.ico', msTileImage: 'favicon.ico' } } }
Vue项目中favicon.ico的应用配置&取消favicon.ico请求
weixin_43286206的博客
10-26 1358
favicon.ico的应用配置 首先，一般把favicon.ico（固定命名）放在static里，如下图： 在开发环境中，配置 webpack.dev.conf.js里的plugins new HtmlWebpackPlugin里加上 favicon: ‘./static/favicon.ico’,相对路径 项目打包部署，便配置 webpack.prod.conf.js里的plugins new HtmlWebpackPlugin里加上 favicon: ‘./static/favicon.ico’,相对
在Vue项目中添加网页图标（favicon.ico）的JavaScript方法
laugh666的博客
09-13 1104
首先，你需要将你的favicon.ico图标文件放置在Vue项目的public文件夹下。当你开发一个Vue项目并且想要为你的网页添加一个自定义的图标时，你可以使用JavaScript来实现。在本篇文章中，我将向你展示如何使用JavaScript来添加favicon.ico图标到Vue项目中的网页。这样，当你的Vue项目被部署到不同的环境中时，它会自动使用正确的路径来引用图标文件。在你的Vue项目的src目录下，创建一个新的文件，命名为。现在，你可以在你的Vue项目中的任何需要的地方调用。
vue项目修改favicon.ico
最新发布
02-08
### 更改 Vue.js 项目中的 Favicon.ico 图标 #### 使用配置文件统一管理 Favicon 路径 为了简化不同项目的Favicon管理，可以在配置文件中设置Favicon路径。通过这种方式，在多个地方使用的HTML模板可以引用同一个配置项，从而减少重复劳动和错误发生的可能性。 对于Vue CLI创建的应用程序来说，可以通过`vue.config.js`来进行全局性的配置调整[^1]： ```javascript // vue.config.js module.exports = { chainWebpack: config => { config.plugin('html').tap(args => { args[0].favicon = './src/assets/favicon.ico'; return args; }); } } ``` 此段代码会告诉HtmlWebpackPlugin使用指定位置的图片作为网页标签页的小图标。 #### 利用 JavaScript 动态加载 Favicon 另一种方式是在应用初始化阶段利用JavaScript动态改变文档头部链接元素指向的新图标资源地址[^2]: ```javascript function changeFavIcon(url){ let link = document.querySelector("link[rel*='icon']") || document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = url; document.getElementsByTagName('head')[0].appendChild(link); } changeFavIcon('/path/to/new-favicon.ico'); // 替换成实际图标URL ``` 这种方法的好处在于不需要重新编译整个应用程序就可以即时更新浏览器Tab上的显示图像。 #### 修改 Webpack 配置以支持静态资源处理 如果上述两种方法未能达到预期效果，则可能是因为构建工具链对静态资产的支持不够完善所致。此时应该检查并适当修改WebPack的相关配置选项，比如在`build/webpack.dev.conf.js`里面加入如下所示的一行配置[^3]: ```javascript new HtmlWebpackPlugin({ ... favicon: path.resolve(__dirname, '../static/bitbug_favicon.ico'), }) ``` 这一步骤确保打包过程中能够正确识别并引入所需的Favicon文件。 #### 手动编辑 HTML 文件指明新图标路径 最直接的办法就是直接操作位于`public/index.html`内的<link>标记，把其`href`属性更改为所要替换的那个`.ico`文件的位置[^4]: ```html <!-- public/index.html --> <!DOCTYPE html> <html lang="en"> <head> <!-- Other meta tags and links... --> <link rel="icon" href="%PUBLIC_URL%/new-favicon.ico"> </head> <body> ... </body> </html> ``` 完成以上任一或组合措施之后，请记得重启开发服务器以便使改动生效，并确认新的Favicon已经成功应用于页面之上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值