如何删除 Vue 中硬编码的图标？

Posted 2023-02-22

【中文标题】如何删除 Vue 中硬编码的图标？

【英文标题】：How to remove the hardcoded favicon in Vue?

【发布时间】：2019-08-14 18:48:35

【问题描述】：

我安装了带有 PWA 插件和 i18n 的 Vue CLI 3。

我删除了 /public/ 中的所有 Vue 图标文件（包括 /public/img/icons 中的 PNG），删除了 /src/assets 中的 logo.png 文件，删除了 / 中的 link(rel=icon) 标签public/index.html，更改 manifest.json 以删除对现有 Vue 图标文件的任何引用，清除我的浏览器缓存，但在加载页面时，我仍然在我的 DOM 中获得这些硬编码的链接标签：

<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png">
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87">
<meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png">

这些文件都不存在，并且在我的项目中的任何地方都没有引用它们。最奇怪的是，即使在删除所有文件之后，默认的 Vue favicon 仍然显示在我使用的任何浏览器中，所以它绝对不是客户端缓存的东西。

如何删除这些？

【问题讨论】：

你默认使用vue pwa模板吗？

我猜，它来自manifest 文件。你能检查一下吗？

检查你的 vue.config.js 。可能有来自 pwa iconPaths

的条目

@varit05 我的 manifest.json: "name": "client", "short_name": "client" ], "start_url": "./index.html", "display": "standalone", "background_color": "#000000", "theme_color": "#4DBA87"

@dagalti 我的 vue.config.js: module.exports = devServer: host: '0.0.0.0', disableHostCheck: true , pluginOptions: i18n: locale: 'en', fallbackLocale: 'en', localeDir: 'locales', enableInSFC: true

【参考方案1】：

我刚刚发现我需要编辑我的 vue.config.js 并添加如下内容：

    pwa: 
        name: 'Test',
        iconPaths: 
          favicon32: '(any icon file here)',
          favicon16: '(any icon file here)',
          appleTouchIcon: '(any icon file here)',
          maskIcon: '(any icon file here)',
          msTileImage: '(any icon file here)'
        
    

覆盖默认设置（请参阅https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa）

【讨论】：

谢谢，正在找！

顺便说一句，从vue-cli 4.3.0 开始，如果iconPaths 中的某个项目的值为null，它将不会包含在构建中。