vue项目 设置浏览器地址栏图标及名称

在vue项目中,怎样设置浏览器tab图标及名称呢?

方案一

1.静态配置vue项目ico

1.1将需要展示的ico放到项目文件中


1.2在项目根目录public文件中的index.html添加如下代码

html 复制代码
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />

二.动态配置网站ico

javascript 复制代码
//动态设置就在拿到数据之后调用这个方法
getCreate(url){
	 var link= document.querySelector("link[rel*='icon']") || document.createElement('link');
	 link.type = 'image/x-icon';
	 link.rel = 'shortcut icon';
	 link.href = 'ico文件的url' 
	 document.getElementsByTagName('head')[0].appendChild(link);
},

方案二

项目根目录下 没有 public文件夹 时,

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

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

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

favicon.ico的图标文件放到static文件夹内,在index.html的head中添加:
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ed6fca8b984149439f3bf68c54878622.png)

保存并刷新浏览器,看浏览器图标已经正确设置上了。设置后图标在测试环境、生产环境(打包后)都正常显示。

Tips: 注意,此处有坑,下面为测试环境有效,生产环境不生效配置,因为打包后目录变了,找不到src里面的路径了!!!

build文件夹

找到webpack.dev.conf.js,再找到HtmlWebpackPlugin,添加favicon:'favicon.ico路径',

javascript 复制代码
new HtmlWebpackPlugin({
 
  filename: 'index.html',
 
  template: 'index.html',
 
  favicon:'./favicon.png', //这里设置图标路径
 
  inject: true
 
})

然后找到webpack.prod.conf.js,再找到HtmlWebpackPlugin,添加favicon:'favicon.ico路径'

javascript 复制代码
new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      favicon: './favicon.png', //这里设置图标路径
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      }
相关推荐
qq_390161772 分钟前
防抖函数--应用场景及示例
前端·javascript
3345543230 分钟前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test31 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome