vue项目修改浏览器图标以及标题

favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置，目前主要的浏览器都支持favicon.ico图标.

目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。

然后去index.html在head下添加：

<link rel="icon" href="static/img/logo/logo.jpg" type="logo/logo.jpg">
<link rel="shortcut icon" href="static/img/logo/logo.jpg" type="logo/logo.jpg">   <!-- 必须 -->

然后保存刷新浏览器，就会更新。（需重新运行项目npm run dev）

如果没有效果，则查看你的build文件夹下：build/webpack.dev.conf.js中。（到这个步骤之前我的是出现了，并且正常显示，如果不显示，则配置一下吧。）添加： favicon:'static/bitbug_favicon.ico'

new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true,// favicon图标(这里需要图标的路径与页面中的路径一样)// favicon: 'static/bitbug_favicon.ico' // favicon: path.resolve('static/bitbug_favicon.ico')favicon:'static/bitbug_favicon.ico'}),

到这里重新启动程序，页面的favicon已经可以正常显示了。(重新运行项目）

如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序

vue项目修改浏览器图标以及标题相关推荐

vue项目修改浏览器图标
首先打开项目目录: 找到index.html: 在index.html的head中添加: <link rel="shortcut icon" type="image ...
VUE项目修改浏览器图标及名称、修改网址图标及名称
1.原图 2.修改,在public下的index.html中修改 3.更改成功
在vue中修改浏览器图标和名字
在vue中修改浏览器图标和名字 vue中,网页图标默认使用的是vue自带的一个icon的图标,也是vue的logo. 下面整理了几种改变标题和图标的方法 1.修改图标样式 01.使用图片这个方法是可 ...
Vue项目修改浏览器滚动条样式
Vue+Element组件修改浏览器滚动条样式前言:在Vue项目中会有使用到滚动条的情况,但是会遇到原生滚动条的样式不满足UI设计,因此需要改变滚动条的样式,下面使用两种方式来修改滚动条的样式,以V ...
vue项目中浏览器图标的设置
在vue项目中,我们怎样设置浏览器图标? 我们来看vue项目的目录结构,根目录下有一个index.html,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在index.html的h ...
去掉vue项目的浏览器图标
index.html <link rel="shortcut icon" href="#"/> ...
动态修改浏览器图标和标题
情景:系统支持修改系统的名称和图标,并且图标同步展示为浏览器页签的图标 // 配置浏览器标题和图标document.title = this.configForm.chineseTitleif (nu ...
Vue中修改浏览器图标Logo
1.找到index.html文件 2.修改这段代码中的图片 <link rel="icon" type="image/x-icon" href=" ...
【react】react项目修改浏览器图标
在public文件夹下放置对应的favicon.icon 打开public/index.html 在head里面加入下面行代码 <!-- %PUBLIC_URL%代表public文件夹的路径 - ...

vue项目修改浏览器图标以及标题

vue项目修改浏览器图标以及标题相关推荐

最新文章

热门文章