更改图标 Vuejs？答案

【问题标题】：Change favicon Vuejs?更改图标 Vuejs？
【发布时间】：2019-04-12 10:50:48
【问题描述】：

如何在 Vuejs CLI 上更改网站图标？

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

【问题讨论】：

favicon.ico 保存在公共文件夹中
stackoverflow.com/questions/40190524/…怎么样
How to set favicon.ico properly on vue.js webpack project?的可能重复

标签： vue.js webpack vue-cli-3

【解决方案1】：

Vue CLI (3.0.5) 使用包含favicon.ico 和index.html（引用favicon.ico）的<root>/public 目录生成项目。

您的图标似乎在<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">

【讨论】：

【解决方案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);
})();

【讨论】：

【解决方案3】：

如果您使用的是 vue cli2，请将您的 fovicon 放入静态文件并更改 <link rel="shortcut icon" type="image/png" href="static/jinane-logo-JC.png"/> 或者您正在使用 vue cli3，将您的 favicon 图像放在公共文件中，并在 index.html 中公开更改它 <link rel="icon" href="<%= BASE_URL %>jinane-logo-JC.png">

【讨论】：

【解决方案4】：

按照以下步骤操作：-

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

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

【讨论】：

【解决方案5】：

你应该使用vue-head包

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

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

祝你好运！

【讨论】：