vue项目配置favicon图标

最新推荐文章于 2022-08-17 16:28:25 发布
最新推荐文章于 2022-08-17 16:28:25 发布
阅读量753 收藏 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无法正常显示的问题
12-07
然而，在使用Vue.js框架构建项目时，可能会遇到打包后favicon图标无法正常显示的问题。这个问题通常与资源路径配置有关，尤其是在使用本地图片作为favicon时。下面将详细探讨问题的根源，以及提供一种可行的解决方案...
手把手教你更改Vue项目图标
不愧是暮言的博客
08-15 5882
除了使用第三方图标库外，你还可以自定义样式，使用项目中的自定义图标。这需要你自己设计和绘制图标，并将其转化为字体文件（通常使用SVG格式）
vue如何更换网页标签的logo
官方推荐
09-07 6369
Vue2 版本更换图标 在我们项目的根目录下面去添加或者替换 favicon.icon文件 找到我们的 build 文件夹下面的这两个文件 进行如下配置 favicon: resolveApp(’./favicon.ico’) 刷新后发现并没有什么效果 莫慌 最后一步 重启项目 改变端口 如果重启后还没有起到作用的话就清除缓存 或者直接改变端口进行重启 图标变成我们想要的样子了 ...
vue设置favicon.ico图标
Hoey的博客
03-17 1419
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 8790
vue项目中直接用自己的图片替换掉favicon.ico，图标为什么不生效？ 在一般情况下：创建项目之后，默认的小图标是favicon.ico，我们想要自定义小图标只需要用新的图片替换掉favicon.ico即可，但是我直接替换掉favicon.ico并不生效： 是因为项目使用了@vue/cli-plugin-pwa插件，这个插件会更改网页标签图标的路径，所以导致我们的项目中多出来一个public/img/icons文件夹 官方解释： https://www.npmjs.com/package/@vue/
vue中添加favicon 图标 （3种方法）
IT博客技术分享
11-19 6829
首先将favicon.ico图片放在根目录下，通过以下两种方法使其显示正确。 方法一：修改index.html文件 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 缺点：打包后需要将favicon.ico复制到根目录 方法二：修改webpack配置文件 1、找到build下的webpack....
vue小图标favicon不显示的解决方案
08-29
在 Vue 项目中，小图标 Favicon 不显示的原因可能有多种，例如： * Favicon.ico 文件路径错误 * Webpack 配置错误 * 缓存问题 三、解决方案 为了解决 Vue 小图标 Favicon 不显示的问题，我们可以采取以下步骤： ...
vue favicon设置以及动态修改favicon的方法
10-17
在Vue项目中设置和动态修改favicon，...通过上述知识点的介绍，我们可以了解到在Vue项目中设置和动态修改favicon的整个过程，包括了解Vue CLI项目结构、Webpack配置、JavaScript操作DOM以及前端与后端交互等重要方面。
02-搭建VUE前端项目
01-08
- `public`: 静态资源文件夹，如HTML模板、favicon图标等。 - `src`: 源代码文件夹，包括API请求、全局组件、路由、状态管理等子文件夹。 - `api`: 所有HTTP请求的封装。 - `components`: 全局复用的UI组件。 -...
vue3项目（包含快捷样式）
11-15
- `public`：存放静态资源，如favicon图标和index.html。 - `.babelrc`：Babel配置文件，用于转换ES6+语法至浏览器兼容的JavaScript。 - `vue.config.js`：Vue CLI的配置文件，可自定义Webpack配置。 Vue3项目还...
vue 中url 链接左边的小图标更改问题
10-15
Vue项目中更换favicon图标涉及到几个步骤，以下便是详细的步骤和相关知识点的解释。 首先，你需要获取或者生成一个适合的favicon图标文件。这个文件一般是ico格式，可以使用在线工具生成，比如文章中提供的生成地址...
vue脚手架搭建项目及vue学习
最新发布
06-06
公共资源目录，包括不被webpack处理的静态资源，如favicon图标、HTML索引文件、CSS全局样式等。 在Vue学习过程中，理解组件、指令、计算属性、生命周期钩子、Vuex状态管理、Vue Router路由、axios数据交互等核心...
如何优雅地处理Django中的favicon.ico图标详解
12-25
favicon.ico是网站的图标也是网站的头像，简单来说，就是让我们的网站更加好看。 本文主要给大家介绍了关于优雅处理Django中favicon.ico图标的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的...
vue电商项目前端原型
08-01
2. `public`：放置静态资源，如HTML入口文件、 favicon图标、CSS样式等。 3. `node_modules`：存放所有项目依赖的npm包。 4. `package.json`：记录项目信息、依赖、脚本等。 5. `.gitignore`：定义了哪些文件或目录...
基于脚手架创建Vue项目实现步骤详解
11-19
- `public`：放置静态资源，如favicon图标等，会被原样复制到dist目录。 - `package.json`：项目配置文件，记录项目依赖、脚本等信息。 - `.eslintrc.js`（如果有）：ESLint的配置文件，用于代码风格检查。 - `....
vue项目中配置favicon图标
热门推荐
xm2by的博客
08-15 1万+
vue项目中配置favicon图标 如上图所示，页面顶部的小图标会让页面显得高大上，一般把这种图标叫做favicon图标。利用vue-cli脚手架搭建的项目，如果不手动配置，页面中是不会显示favicon图标。 不配置是这样子的： favicon图标的配置也很简单，vue-cli默认帮我们安装了html-webpack-plugin（如果没有，可以自己npm安装），我们只需在html...
vue项目--favicon设置以及动态修改favicon(浏览器顶部小图标)
岁末zzz的博客
11-07 7365
动态更新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换地址栏左边的logo
牵着蜗牛去旅行的博客
03-16 797
先在根目录下新建个 favicon.ico 图标文件 然后找到build文件夹下的webpack.dev.conf.js和webpack.prod.conf.js 分别添加这行代码 favicon: path.resolve('favicon.ico'), 在webpack.dev.conf.js代码 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject:
vue 修改浏览器标签页图标
qq_36958916的博客
08-17 996
vue 修改浏览器标签页图标
vue 打包后favicon不生效
09-05
在vue项目中，favicon是指网站标题上显示的小图标。当我们使用vue-cli将项目打包后，往往会遇到favicon不生效的问题。 这个问题主要是由于favicon的路径不正确导致的。在vue项目中，favicon通常放在public文件夹下，而public文件夹下的资源在打包时不会经过webpack的处理，直接被复制到输出目录。 要解决这个问题，我们需要在public文件夹下添加正确的favicon.ico文件，并且保证在index.html文件的head标签中正确引用了该文件。可以使用相对路径或绝对路径来引用favicon.ico文件。 如果仍然无法生效，可以尝试清除浏览器缓存或重新打开浏览器。 另外，在使用vue-cli打包时，可以通过在vue.config.js文件中配置publicPath来调整打包后的资源路径，确保能正确引用到favicon.ico文件。 总结起来，解决vue打包后favicon不生效的问题需要注意以下几点： 1. 确保public文件夹下存在正确的favicon.ico文件。 2. 在index.html文件的head标签中正确引用favicon.ico文件。 3. 清除浏览器缓存或重新打开浏览器。 4. 可以通过配置vue.config.js文件中的publicPath来调整打包后的资源路径。 通过以上步骤，应该能够解决vue打包后favicon不生效的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值