vue.js - 如何删除 Vue 中硬编码的图标?
问题描述
我安装了带有 PWA 插件以及 i18n 的 Vue CLI 3。
我删除了 /public/ 中的所有 Vue 图标文件(包括 /public/img/icons 中的 PNG),删除了 /src/assets 中的 logo.png 文件,删除了 /public/index 中的 link(rel=icon) 标签.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.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)
推荐阅读
- powershell - 当从 Powershell Core 和 Powershell 5.1 运行脚本时,使用 export-csv 的 Powershell 输出会产生不同的结果
- mysql - 考虑通过将“EnableRetryOnFailure()”添加到“UseMySql”调用来启用瞬时错误恢复能力
- kubernetes - 使用 Quarkus 挂载 Kubernetes 卷
- swiftui - 如何在 SwiftUI 中正确使用动态成员绑定?
- java - 是否可以在另一个类中调用 @beforeclass 而无需在当前的 testng 类中扩展
- c - 从文件中读取c中结构数组中的dma结构时如何分配内存
- python - 使用命令提示符下的 python 脚本从 git bash 克隆 git repo 失败。为什么?
- angular - Angular MatDialog'bootstrap'没有显示正确或丢失
- typescript - 导入图片时TS无法从node_modules中找到模块
- c - 使用 C 语言计算该短语中每个单词的出现次数