Vue index.html favicon 问题答案

【问题标题】：Vue index.html favicon issueVue index.html favicon 问题
【发布时间】：2019-03-12 02:07:04
【问题描述】：

我正在使用 Vue 2.0 和 Vue CLI 3.0。我正在尝试让 favicon.ico/png 文件正常工作，但一点运气都没有。

我已将问题范围缩小到以下。

yarn build生成的index.html文件转换了这行html代码：

<link rel="icon" href="favicon.png" >

到...

<!--[if IE]><link rel="icon" href="favicon.png"><![endif]-->

如果我进入 Chrome 开发人员工具并将行改回原来的方式，ico/png 文件将按预期呈现。

我的问题是：我该如何解决这个问题，以便 yarn build 不再弄乱我的 html 代码。

【问题讨论】：

【解决方案1】：

在vue.config.js 中设置图标的 PWA 选项以指向您想要的任何图标。具体来说，例如设置pwa.iconPaths：

module.exports = {
  pwa: {
    iconPaths: {
       favicon32: 'img/icons/myFavicon.png',
    }
  }
}

见

【讨论】：

谢谢！非常感谢贾斯汀。
这似乎对我不起作用。我试图重置所有这些值（不仅是 favicon32，还有其他选项），无论出于何种原因，每次我运行我的构建命令时它仍然输出默认路径。不知道其他人是否遇到了这个问题。我不确定我可以附上截图，但我可以告诉你我的对象结构与贾斯汀的答案完全相同，即 export = { pwa: { iconPaths: { favicon32 : ...
我还必须添加 favicon16 指向同一个 png 文件才能真正起作用。在我尝试之前，我在manifest.json 中对其进行了编辑，这导致 Chrome 下载了我的图标，但实际上并没有显示它。仅添加此 pwa 节实际上使其工作。