为什么我的 Vue.js 项目没有显示我的网站图标？答案

【问题标题】：Why isn't my favicon displaying for my Vue.js project?为什么我的 Vue.js 项目没有显示我的网站图标？
【发布时间】：2020-05-12 11:47:40
【问题描述】：

我的网站图标不再显示在我的 Vue.js 项目中（它工作了一段时间）。据我所知，我没有更改任何与网站图标相关的代码或移动文件。在我的index.html document 的<head> 标记中，我使用以下（自动生成的）代码行链接到我的网站图标：

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

我的网站图标位于公共目录中，如下所示

我尝试用以下所有内容替换上面自动生成的行，但无济于事：

<link rel="icon" href="favicon.png">
<link rel="icon" href="/favicon.png">
<link rel="icon" href="./favicon.png">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="icon" type="image/png" href="./favicon.png">

我什至根据其他一些论坛关于该主题的建议制作了一个 vue.config.js 文件，但也没有用

module.exports = {
  pwa: {
    iconPaths: {
      favicon32: "./public/favicon.png",
      favicon16: "./public/favicon.png",
      appleTouchIcon: "./public/favicon.png",
      maskIcon: "./public/favicon.png",
      msTileImage: "./public/favicon.png"
    }
  }
};

每次更改后，我都清除了浏览器缓存，并在各种浏览器上进行了尝试。在这一点上，我完全不知道是什么原因造成的：/

版本：

"vue": "^2.6.11",
"vuex": "^3.1.2",

【问题讨论】：

你的<%= BASE_URL %>是什么？这是一些绝对路径吗？基本上，您只需要像您给出的其他示例中那样具有相对 URL。
当你用浏览器直接浏览到预期的位置时，你能加载favicon吗？
你是如何解决这个问题的？

标签： vue.js vuejs2 vuex favicon vercel

【解决方案1】：

查看附加链接，我认为在配置 vue 项目时存在一些目录问题。

https://stackoverflow.com/a/40191627/12489279 enter link description here

【讨论】：

在发布此问题之前，我尝试使用该帖子的静态文件夹，但它对我不起作用。在其他地方阅读静态文件夹已被弃用（默认情况下不在我的项目目录中），所以我自己创建了一个并正确引用了该文件无济于事。
你有没有通过webpack.config文件做同样的事情

【解决方案2】：

我建议使用this 网站来生成网站图标。我在 Vuejs 中也遇到了一些问题，但该网站运行完美。还为您提供了需要添加到 index.html 文件中的代码。

【讨论】：

我已经有了 favicon.png 文件，并且以前在实时站点上正确显示了 favicon。在过去一两个月的某个时候，它停止了/：