vue3.0 解决浏览器小图标 ico图标更换不了的问题记录

最新推荐文章于 2024-07-27 01:08:40 发布

我胖虎不答应！！

最新推荐文章于 2024-07-27 01:08:40 发布

阅读量1.4k

点赞数 2

分类专栏： vue3 记录前端其他文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/sinat_36728518/article/details/110490027

版权

记录同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

前端其他

30 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue3项目中设置图标，包括针对IE的条件注释解决方案，以及在Vue.config.js中配置PWA的iconPaths。重点在于确保在不同浏览器环境下Logo的正确显示和PWA的图标设置。

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

vue3设置ico图标审查元素显示如下

<!--[if IE]><linke rel="icon" herf="logo.ico" /><![endif]-->

解决方法

index.html

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>logo.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="<%= BASE_URL %>logo.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>

vue.config.js

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