vue项目中设置浏览器图标

如何设置项目运行时在浏览器网页窗口中图标的显示,请如下操作:
vue项目中设置浏览器图标
文章图片

通过看vue项目的目录结构,根目录下有一个index.html,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在index.html的head标签中添加link标签。
这里要注意的是图标文件的位置,不能放到src里,这样的路径会让浏览器找不到。网页把根域名作为相对路径的根目录了,然而我们文件的路径是相对于项目文件的根目录的,因此就找不到了。
因此,图片一类的静态文件,应该放在这个static文件夹下,这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下。这时我们使用static绝对路径,就可以访问静态文件了。
在index.html的head中添加:
vue项目中设置浏览器图标
文章图片

保存并刷新浏览器如下所示:
vue项目中设置浏览器图标
文章图片


-------------------------------------------------------------------------------------------------------------------------------------------------------------------------另一种目录
vue项目中设置浏览器图标
文章图片

【vue项目中设置浏览器图标】vue项目中设置浏览器图标
文章图片

    推荐阅读