900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > VUE3 项目自定义修改网页标题和图标

VUE3 项目自定义修改网页标题和图标

时间:2019-04-12 18:54:23

相关推荐

VUE3 项目自定义修改网页标题和图标

VUE3中,网页图标默认使用的是VUE自带的一个ico的图标,也是VUE的logo。那么作为我们自己开发的项目,如何自定义修改网页的图标和标题呢?很简单,下面就介绍一下。

1 标题修改

标题修改直接在项目的 /public/index.html中修改title标签即可。

<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>vue-manage-system</title></head>

2 图标修改

这个修改相对来说,需要以下几个步骤。

1)首先做一个ico的小图标,命名为 favicon.ico 放在 /public/下面,替换原有的 favicon.ico,同时删除 /public/img/icons/ 下面的VUE图片。

2)在根目录下面新建vue.config.js, 添加pwa

module.exports = {pwa: {iconPaths: {favicon32: 'favicon.ico',favicon16: 'favicon.ico',appleTouchIcon: 'favicon.ico',maskIcon: 'favicon.ico',msTileImage: 'favicon.ico'}}};

3 重启项目即可。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。