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 重启项目即可。

VUE3 项目自定义修改网页标题和图标相关推荐

Vue 动态修改网页标题和图标
VUE2: 二.普通方案,使用Vue-Router的beforeEach拦截 routes: [{path: '/',name: 'home',component: () => import(' ...
怎么改vue项目的标题_Vue动态修改网页标题的方法及遇到问题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
vue 项目修改网页 title 和图标
修改网页 title 和图标网页 title 位置和图标位置修改路径在项目文件下的 public 文件夹下的 index.html 文件中的 title 里面 // 在html 中引入文 ...
浏览器-网页标题的图标
为网页标题添加图标一.图标格式一般网页标题前的小图标是 ico 格式,但其实png,jpg的格式都可以,而且浏览器会自动帮你把图片尺寸缩放到16 *16.不过.ico格式体积要小很多,另外注意透明 ...
vue动态修改浏览器标题和图标
项目场景: 在一个功能一致的项目中,要分别部署成两个系统. 问题描述两个系统名称不一致.标题不一致.logo不一致,又不想单独拉出一套代码(单独拉出后维护成本增加),想要动态改变. 解决方案: 在m ...
怎么在网页标题加入图标？
我们在浏览网站的时候,大部分网站页面的标题都是有图标的,那么如何在网页标题添加图标? 首先,我们需要准备一张自己需要的图片.然后在百度搜索ico,找到在线生成 ioc图标. 点开以后,点击选择文件,选 ...
易语言修改html内容,易语言修改网页标题源码
易语言修改网页标题系统结构:取IES对象,GetCursorPos,WindowFromPoint,SendMessageTimeout,ObjectFromLresult,RegisterWindo ...
vue项目更改网页标题与图标
1.基于vue-cli2.9.6的一个vue工程,找到index.html 2.修改网页的标题 3.添加图标语句,将图标放在static文件夹下面. <link rel="icon&q ...
如何在HTML中修改网站标题和图标？
修改网站标题方法: 在head头部信息里使用title标签来修改: <title>test</title> 修改网站图标方法: <link rel="icon& ...

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

1 标题修改

2 图标修改

3 重启项目即可。

VUE3 项目自定义修改网页标题和图标相关推荐

最新文章

热门文章