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

时间:2019-03-24 09:30:25

标签: vue.js webpack vuejs2 webpack-dev-server vue-cli-3

我安装了带有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图标仍会在我使用的任何浏览器中显示,因此绝对不是客户端缓存。

如何删除这些?

1 个答案:

答案 0 :(得分:2)

我刚刚发现自己需要编辑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