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

最新推荐文章于 2024-05-28 09:23:47 发布

走马看黄花

最新推荐文章于 2024-05-28 09:23:47 发布

阅读量9.9k

点赞数 5

本文链接：https://blog.csdn.net/u014328243/article/details/107372712

版权

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>明月网址导航</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 重启项目即可。

PS：广告位招租。本人想通过众筹的方式配置一台台式机，主要用来程序开发、三维设计、视频剪辑等。欢（xi）迎（wang）各位打赏赞助，感激不尽。

精诚所至，金石为开。知识无价，开源共享。

走马看黄花

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
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">
复制链接

扫一扫