为啥我的 Vue.js 项目没有显示我的网站图标？

Posted 2023-02-22

技术标签:

【中文标题】为啥我的 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"
    
  
;

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

版本：