Vue中怎么设置图标

在vue项目中，我们怎样设置浏览器图标？

我们来看vue项目的目录结构，根目录下有一个index.html，这个就相当于我们普通项目中的各个html页面文件，所以设置方法就是在index.html的head标签中添加link标签。

在这里要注意的是图标文件的位置，不能放到src里，这样的路径会让浏览器找不到。网页把根域名作为相对路径的根目录了，然而我们文件的路径是相对于项目文件的根目录的，因此就找不到了。

因此，图片一类的静态文件，应该放在这个static文件夹下，这个文件夹下的文件（夹）会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径，这样就可以访问这些静态文件了。所以推荐将项目中的静态文件放到static文件夹下。

将favicon.ico的图标文件放到static文件夹内，在index.html的head中添加：

<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">

保存并刷新浏览器，看浏览器图标已经正确设置上了。