Favicon 在 vue cli 项目中没有改变答案

【问题标题】：Favicon not changing in vue cli projectFavicon 在 vue cli 项目中没有改变
【发布时间】：2021-03-01 11:43:41
【问题描述】：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>Vue Router Practice</title>
</head>

<body>
  <noscript>
    <strong>We're sorry but vue-todo doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

这是我在public 文件夹中的index.html 文件的代码。还有一个名为favicon.ico 的图标文件。但是当我运行我的开发服务器时，没有显示图标。请帮帮我。

我试图改变 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 至 <link rel="icon" href="/favicon.ico"> 但它也不起作用。当我输入localhost:8080/favicon.ico 时，它会显示我的图标。

另外，当我在 chrome 开发工具上调试时，有正确的 HTML 标签。


<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>Vue Router Practice</title>
</head>

预期结果：应该显示网站图标。

【问题讨论】：

标签： vue.js

【解决方案1】：

我有同样的问题..但是我成功解决了这个问题，当我在属性 rel 中将双引号切换为简单引号时，但我不知道为什么..

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

替换为：

    <link rel='icon' href="<%= BASE_URL %>favicon.ico">

【讨论】：

非常感谢您。但是任何人都可以解释为什么在这种情况下......？！？！？！
几个小时以来我一直在为此苦苦挣扎。我的天哪..@DarkyWC，我的猜测是它被 eslint 阻止了。它对双重和简单的 quoutes 非常挑剔。我讨厌 eslint :P
什么！！！有用！该死！怎么会哦不。谢谢楼主！

【解决方案2】：

如果您使用 PWA，请检查您的 public/img/icons 文件夹。并确保您的 favicon-16x16.png 和 favicon-32x32.png 文件不是默认文件。

强制缓存的最佳方法是直接点击网站图标地址

http://yourwebsite.com/favicon.ico

然后按 control+f5 用于 windows/linux 或 shift+command+R 用于 Mac。你会看到它的变化。然后导航回您的网页，它将被刷新。

【讨论】：

【解决方案3】：

我遇到了这个问题，似乎 Chrome 正在缓存网站图标（同时处理多个项目）。所以清除缓存并关闭浏览器选项卡并重新启动对我有用

【讨论】：

【解决方案4】：

就我而言，我也将项目创建为 PWA，因此我还需要更改所有相关图标

【讨论】：

【解决方案5】：

我在 PWA 项目中也遇到过这个问题，但清除缓存解决了这个问题。

【讨论】：