更改图标 Vuejs？

Posted 2023-02-22

【中文标题】更改图标 Vuejs？

【英文标题】：Change favicon Vuejs?

【发布时间】：2019-04-12 10:50:48

【问题描述】：

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

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

【问题讨论】：

favicon.ico 保存在公共文件夹中

***.com/questions/40190524/…怎么样

How to set favicon.ico properly on vue.js webpack project?的可能重复

【参考方案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.***.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")
             ,
          ]
       
   

祝你好运！