vue-cli3.0设置页面icon图标不更新

最新推荐文章于 2024-04-10 12:39:36 发布

景尘

最新推荐文章于 2024-04-10 12:39:36 发布

阅读量708

点赞数

分类专栏：前端vue技术点干货分享前端干货分享文章标签： .ico

本文链接：https://blog.csdn.net/lbPro0412/article/details/108533084

版权

前端vue技术点干货分享同时被 2 个专栏收录

77 篇文章 24 订阅 ¥99.90 ¥299.90

订阅专栏

前端干货分享

69 篇文章 22 订阅 ¥99.90 ¥299.90

订阅专栏

在Vue CLI3.0项目中遇到页面图标(ICO)无法更新的问题，通过修改vue.config.js文件并进行浏览器强制刷新或重启命令行后刷新浏览器，可以解决该问题。

摘要由CSDN通过智能技术生成

html部分代码：

vue.config.js：

module.exports = {
  pwa:{
    iconPaths: {
      favicon32     : 'favicon.ico',
      favicon16     : 'favicon.ico',
      appleTouchIcon: 'favicon.ico',
      maskIcon      : 'favicon.ico',
      msTileImage   : 'favicon.ico'
   }
  }
  
}

刷新浏览器就可以了，或者重启命令行再刷新浏览器

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

景尘

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

在vue-cli3项目中使用svg-sprite-loader

草灯的专栏

09-11

1411

目录概览使用svg-sprite-loader好处手把手图文教程：如何引入svg-sprite-loader上iconfont上搜索需要的icon图标，下载svg格式文件，放入到src>icons>svg目录下在main.js页面里面引入icons在页面中使用svg-sprite-loader图标。最终演示效果如下：参考文章icons和SvgIcon目录下载使用svg-sprite-loader好处我用vue-cli3.0 + elementUI 搭建项目，但是elementUI的icon组

浏览器小窗口图标不刷新，favicon.ico图标不刷新解决办法

11-27

2354

解决办法应该都是通用的，因为我启动了一个 PHP 项目，一个 vue 项目，一个 nodejs 项目亲测可行 php 和 nodejs 项目相对比较简单(其实都简单)，相对来说 vue 项目，可能有的人绕不过弯来说说 vue 项目吧：我的窗口小图标放在了根目录的 static 下面，当换了图标，而图标不刷新的时候，不管你怎么清缓存，它也不给你刷新，可能过几天就好了，但是你不会去等比如我的项目...

参与评论您还未登录，请先登录后发表或查看评论

vue2设置浏览器标签页图标不生效

最新发布

weixin_49454414的博客

04-10

548

这是因为浏览器通常会默认寻找名为。的文件作为标签页图标。

记一次更新iconfont图标

fxinn的博客

06-09

665

当不知道原来的项目的时候，要如何更新iconfont图标库呢？ https://www.cnblogs.com/smile-fanyin/p/14833344.html

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

weixin_39611072的博客

06-18

542

vue脚手架虽然好用，但是文件配置问题一直很头疼。将原生的代码用vue框架来做，出现种种问题，之前设置小图标的时候也出现了问题，总结了网上的解决方案，在此记下对我亲自试验并奏效的方案：我是直接将favico.ico丢到根目录(就是src同级的目录)，然后进行在build/webpack.dev.conf.js文件配置1.webpack.dev.conf.js文件里plugins里加入这段代码new...

微前端中，Vue动态设置浏览器图标可火狐浏览器却不采用主应用图标的问题

weixin_43589827的博客

07-10

431

有一个需求，需要根据系统（使用乾坤微前端搭建的系统，里面有多个子应用）的配置，去修改系统在浏览器中标签页的图标。而 Vue 的图标默认是这个： BASE_URL 是 process.env 环境中的一个变量，默认是根目录，而它下面的 favicon.ico 就是 index.html 旁边的 favicon.ico 文件了，一般是 Vue 自带的图标。首先我想到了两个思路去处理这个动态设置图标的需求：设置一个变量，通过修改这个变量，达到动态修改图标直接用获取这个 link 节点的方式，去修改它

vue:直接替换掉favicon.ico图标不生效/自定义图标不生效

m0_46370117的博客

10-20

8778

vue项目中直接用自己的图片替换掉favicon.ico，图标为什么不生效？在一般情况下：创建项目之后，默认的小图标是favicon.ico，我们想要自定义小图标只需要用新的图片替换掉favicon.ico即可，但是我直接替换掉favicon.ico并不生效：是因为项目使用了@vue/cli-plugin-pwa插件，这个插件会更改网页标签图标的路径，所以导致我们的项目中多出来一个public/img/icons文件夹官方解释： https://www.npmjs.com/package/@vue/

vue-cli+iview项目打包上线之后图标不显示问题及解决方法

12-13

做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法： 1. 方法一：在build/utils.js下面找到这段代码，将其中publicPath...

Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith

前端向朔

12-13

3997

背景前段时间，我由重构/UI开发转岗前端开发，之前直接在重构自己的目录下输出静态CSS样式和HTML，现在变成直接在Vue-Cli 3.0 脚手架构建的项目下进行开发，这就需要在现有前端开发流程中整合重构流程。我们之前重构是通过 gulp、postcss 等工具实现自动化处理及组件化开发，比如样式自动补全（配置浏览器兼容参数）autoprefixer、HTML 文件引入 gulp-file...

vue3修改link标签默认icon无效问题详解

10-16

主要介绍了vue3修改link标签默认icon无效问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Android中处理apple-touch-icon详解

09-03

主要介绍了Android中处理apple-touch-icon详解,在Android如果想把网页放到桌面上,也需要使用Touch Icon图标才可实现,本文即讲解Android中处理Touch Icon的一些知识,需要的朋友可以参考下

vue-cli3 项目中引入iconfont图标

我要成为一个前端大牛

03-29

1479

1.https://www.iconfont.cn/在网站中新建一个项目 2.将图标加入该项目中 3.选择添加至项目-选中你新建的项目 4.下载至本地 5.解压后 6.在项目-src-assets中新建文件夹icon，将解压后的文件放进去 7.修改iconfont.css文件这里方括号内的icon-map就是一开始新建项目时的前缀 [class^="icon-map"], [class*=" icon-map"]/*这里有空格*/ { font-f

vue进阶04-vue文档生成工具vuepress2

liaomin416100569的专栏

10-20

3649

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求，但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。

关于Apple设备私有的apple-touch-icon属性详解

热门推荐

freshlover的专栏

07-12

5万+

以前我们用过favicon在浏览器给网站进行身份标识，用法如下：现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。实现方法是在HTML文档的标签加入下面代码即可。 apple-touch-icon 标签支

Vue项目引入icon图标的两种方法

绿色水杯的博客

12-06

1万+

我用的是阿里巴巴矢量图标库 ****一，在文件中引入icon项目链接将图标加入项目后会出一个链接（每新添加图标，此链接都应更新）在Vue项目中，public/index.html中将项目链接复制在link中即可二，icon项目下载使用将下载的项目解压，复制到Vue项目中的assets文件中如，assets/iconfont/font 然后在main.js文件中引入 //引入图标 import './assets/iconfont/font/iconfont.css' 最终引入的是icon

vue自定义网页标签图标不生效的原因和解决办法

HYEHYEHYE的博客

07-19

6235

正常情况下，自定义网页标签图标我们只需要更换下图中的favicon.ico即可，但是最近做项目遇到直接替换favicon.ico有不生效的问题用.jpg或.png格式制作成.ico图标的网站有很多，这里推荐一个比特虫：https://www.bitbug.net/ 发现问题原因后来发现项目使用了@vue/cli-plugin-pwa插件https://www.npmjs.com/package/@vue/cli-plugin-pwa 打开上面链接后可以看到插件更改了网页标签图标的路径

php <link rel= icon,icon图标不显示解决方案

weixin_39725365的博客

03-13

1251

图标不显示解决方案原因是当前访问的域名和网站的主域名不一致导致的图标不显示1、apache 在httpd.conf 尾部加上LoadModuleheaders_modulemodules/mod_headers.so#Makesureproxiesdon’tdeliverthewrongcontentHeaderappendVaryUser-Agentenv=!dont...