vue项目如何配置网页标签栏上的小图标

这篇文章是告诉大家，如何更换vue项目中，网页标签栏上的小图标，类似下图：

我们新创建的一个vue项目，运行以后，网页标签栏的小图标默认是下图：

现在我们要把vue项目默认的网页图标，替换我们自己的。

上图是目录结构，图标的路径是public/img/icons/favicon.ico，把这个目录下的小图标替换成自己的，名称可以保持一致。然后在./public文件夹的根目录下，打开index.html，使用link标签将我们刚刚替换的图标引入到其中：，这时候我们发现没有变化。不要着急，还缺少一步。这是由于我们忽略了pwa的配置，pwa里面有个iconPaths这个选项可以用来替换地址。我们还需要在vue.config.js中配置如下项：

现在我们发现，网页标签栏上的小图标已经被替换了。