Question

如何在Vuejs CLI上更改收藏夹图标？

<link rel="shortcut icon" type="image/png" href="/src/assets/img/jinane-logo-JC.png"/>

Answer 1

Vue CLI（3.0.5）的项目为<root>/public目录，其中包含favicon.ico和index.html（引用favicon.ico）。

似乎您的图标在<root>/src/assets中。我建议将其移至<root>/public，将favicon.ico替换为jinane-logo-JC.png，并相应地更新index.html：

<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> --> <!-- REPLACE THIS -->
<link rel="icon" href="<%= BASE_URL %>jinane-logo-JC.png">

Answer 2

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

Answer 3

如果您正在使用vue cli2，请将您的fovicon放在静态文件中并进行更改 <link rel="shortcut icon" type="image/png" href="static/jinane-logo-JC.png"/>或您正在使用vue cli3，请将您的收藏夹图片放入公共文件中，然后在public中的index.html中进行更改 <link rel="icon" href="<%= BASE_URL %>jinane-logo-JC.png">

Answer 4

执行以下步骤：-

将所需的网站图标复制到Vue项目的公用文件夹中。
转到您的项目并查找index.html
查找图标的链接标记并将“ youlogohere”的名称替换为您的徽标名称

< link rel="icon" href="<%= BASE_URL %>yourlogohere.png">
运行项目和图标已更改。

Answer 5

如果您将vue-cli 3与pwa插件一起使用，这对我有用。

找到文章here

您可以从here

了解有关网络清单的信息

Answer 6

您保留使用 vue-head 包

在您的 App.vue 文件中添加此代码：

  export default {
    head: {
       link: [
             {
                 rel: "icon",
                 href: require("./assets/logo.png")
             },
          ]
       }
   }

祝你好运！

更改Favicon Vuejs？

6 个答案: