vue项目在浏览器地址栏设置图标
在vue项目中,我们怎样设置浏览器tab图标?如图
1. 我们来看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/img/favicon.ico"/>
保存并刷新浏览器,看浏览器图标已经正确设置上了。设置后图标在测试环境、生产环境(打包后)都正常显示。
2. 注意,此处有坑,下面为测试环境有效,生产环境不生效配置,因为打包后目录变了,找不到src里面的路径了!!!
在build文件夹
找到webpack.dev.conf.js,再找到HtmlWebpackPlugin,添加favicon:‘favicon.ico路径’,
new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',favicon:'./nationalEmblem.png', //这里设置图标路径inject: true})
然后找到webpack.prod.conf.js,再找到HtmlWebpackPlugin,添加favicon:‘favicon.ico路径’
new HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',favicon: './nationalEmblem.png', //这里设置图标路径inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true// more options:// https://github.com/kangax/html-minifier#options-quick-reference}
vue项目在浏览器地址栏设置图标相关推荐
- vue项目:(全局变量设置与调用)API接口封装 - 代码篇
vue项目,如何将"API接口" 封装为"全局变量" ? 1. API全局配置文件[global.vue文件] <template><div& ...
- Vue项目中background-image属性设置方法
vue项目中background-image属性设置方法 方式一:直接访问 在vue-cli项目中的放在public目录下的资源会被直接复制,不会经过webpack的打包处理. <span cl ...
- Vue项目改变div大小 实现图标大小选择功能
vue项目 实现 自由选择 系统图标大小 我想实现一种选择图标大小,然后改变图标的size,项目:Vue+elment-ui: HTML <el-dropdown @command=" ...
- 在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式 首先说明一下,这 ...
- vue项目中浏览器兼容问题
vue项目中浏览器兼容问题 1.安装 npm install --save babel-polyfill npm install es6-promise --save 2.在main.js中引入(最好 ...
- vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可 记得在m ...
- Vue项目中使用Svg矢量图标
#Vue项目中使用Svg矢量图标 使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装 ...
- vue项目中浏览器图标的设置
在vue项目中,我们怎样设置浏览器图标? 我们来看vue项目的目录结构,根目录下有一个index.html,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在index.html的h ...
- vue项目修改浏览器图标以及标题
favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器都支持favicon.ico图标. 目前vue-cli ...
- 去掉vue项目的浏览器图标
index.html <!-- 去掉vue项目默认图标 --><link rel="shortcut icon" href="#"/> ...
最新文章
- Python --深入浅出Apriori关联分析算法(二) Apriori关联规则实战
- 图标出问题_同是Office365,为什么你的软件图标还是旧版的?
- 《几何与代数导引》例2.7.3
- ViewPager 无限循环遇到的坑 viewpager.setOffscreenPageLimit(2);
- whisper客服源码_深入ethereum源码-whisper协议解读
- batocera游戏整合包_安装游戏时电脑报错?提示XXX文件缺失?一个软件完美解决...
- elasticsearch集群搭建实例
- wordpress and theme
- 如何优化微信小程序排名?
- linux的bridge,Linux Bridge 详解
- 【STM32f401学习之路-01】GPIO实战—点灯、检测按键
- 网络-DNS域名系统详解与DNS攻击
- 心已被爱伤透,情已为爱枯竭
- 一周XX思考(第12期)
- ChatGPT助力之论文速成秘籍
- python三原色组合白色_为何色光三原色三三相加得到白色,这其中加色原理是如何起作用的?...
- OpenGL - SSAO
- python绘制时间节点事件图
- eclipse 自带git插件 文件提交后修改标志不明显
- Incomplete reply from server