在前端开发中，每个网站都有一个图标，这个图标通常叫做站点图标或网站图标（favicon.ico），它出现在浏览器的标签页、书签列表和地址栏等位置，是网站的重要标识之一。
在 Vue.js 中，如果想要使用自定义的站点图标，可以通过以下方式实现。
1. 在 public 目录下添加 favicon.ico 文件
Vue.js 项目的 public 目录是一个静态资源目录，可以在其中添加静态资源文件。我们可以将自定义的站点图标文件 favicon.ico 放在 public 目录下，让浏览器自动加载它。
2. 在 index.html 文件中添加标签
在 public 目录下添加 favicon.ico 文件后，需要在 index.html 文件中添加以下代码：
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
这里，BASE_URL 是 Vue.js 的基础路径，在开发环境下通常为 /，在生产环境下会根据打包后的文件名不同而不同。
3. 使用 vue-head 插件设置站点图标
Vue.js 为我们提供了一个名为 vue-head 的插件，它可以让我们方便地在组件中设置页面的 meta 信息。
使用 vue-head 插件设置页面的 title 和站点图标的代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- --------------
------ ------- ---- -----------------------
------ ------- -
----------- -
-----------
--
------ -
------ -
------ -------
----- -- ---- ------- ----- ------- ---
--
--
--在这段代码中，我们首先导入了 vue-headful 插件和自定义的站点图标文件。然后在组件的 head 方法中，以对象的形式返回了页面的 title 和站点图标信息。
总结
本文介绍了在 Vue.js 中如何使用自定义的站点图标，并提供了三种方法：在 public 目录下添加 favicon.ico 文件、在 index.html 文件中添加标签以及使用 vue-head 插件设置站点图标。对于前端开发人员而言，使用 Vue.js 开发应用时，掌握这些技能非常有意义，能够提高开发效率和网站的用户体验。
参考代码：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- --------------- --
----- ---------- --------- -------- -------------- --
---------- -----------
-------
------
---- ---------------
---- ----- ----- ---- -- ---- -------- ---
-------
--------- -------------------- ---- -------
-- -------------------------
----------
-----
------ --- -------
------
-----------
--------
------ - ---------- - ---- --------------
------ ------- ---- -----------------------
------ ------- -
----------- -
-----------
--
------ -
------ -
------ ------ -------
----- -- ---- ------- ----- ------- ---
--
--
------ -
------ -
---- -------- -- ---- ------ -----
--
--
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653a225e7d4982a6eb3eca17