查看 index.html 图标问题

Question

我正在使用 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 代码。

Answer 1

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

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

见

Vue index.html favicon issue