宜宾网站建设公司

vue3修改link标签默认icon无效问题详解-创新互联

vue3修改link中标签默认icon,vue3初次使用的时候不好好阅读配置难免会遇到一些坑,本人在项目完结的时候打算把浏览器的导航小icon图标给替换了,可是并没有那么顺利,那么如何在vue3中替换默认的icon(favicon.ico)的导航栏图标呢:

创新互联于2013年创立，先为永定等服务建站，永定等地企业，进行企业商务咨询服务。为永定企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

public的index.html有这么一句话,毫无疑问,一看给人的感觉就是在这个位置替换了

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

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

而且favicon.ico也是小图标,于是我直接替换,发现并不生效（特殊情况）,把<%= BASE_BA %>直接改成./发现也不生效,怎么回事呢?

我们顺着问题进行查找,f12打开浏览器调试台查看结构中的icon link href指向

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

居然多了这么多图标地址,还是看官方配置吧,原来是忽略了pwa这个配置(该配置在vue.config.js中进行,不会的请看历史文章,有个介绍vue-config.js的配置介绍):

pwa里面有个iconPaths这个选项可以用来替换地址,官网没有详细说明,在gitHup上有介绍----点击去PWA配置

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网页题目：vue3修改link标签默认icon无效问题详解-创新互联
URL标题：http://ybzwz.com/article/cdipgd.html

其他资讯