vue修改浏览器的标题和图标

旧城等待， 2021-07-25 12:47 942阅读 0赞

# 一，改标题内容  #

方法一：直接在public/index.html中修改title即可，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

方法二：

在main.js中添加一下代码

Vue.directive('title', {
      inserted: function (el, binding) {
        document.title = el.dataset.title
      }
    })

再在app.vue中添加：

v-title data-title="自己的标题内容"

如：

![20191221195519332.png][]

![20191221195527425.png][]

# 二，改标题图片 #

将.ico格式的图片放到public路径下面

![20191221202511923.png][]

再在public/index.html中更换图标名称

![20191221202558466.png][]

效果：

![20191221202622173.png][]

png转ico工具：[https://www.easyicon.net/covert/][https_www.easyicon.net_covert]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/8f38feb97dde4cab98a01788bcb704db.png
[20191221195519332.png]: /images/20210725/de8d7504026147a9903c3a7e878fdd08.png
[20191221195527425.png]: /images/20210725/ff65ba7827864305bc92fbedfe30a616.png
[20191221202511923.png]: /images/20210725/3d123331b29d447281da9ec11f046a54.png
[20191221202558466.png]: /images/20210725/a120c376d3114e0d9151d60e108d38a2.png
[20191221202622173.png]: /images/20210725/4758ee23ad994c5ebf03c1688aaaff5c.png
[https_www.easyicon.net_covert]: https://www.easyicon.net/covert/

发表评论取消回复

表情：

评论列表（有 0 条评论，942人围观）

还没有评论，来说两句吧...

相关阅读

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

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

超、凢脫俗/ 2024年04月20日 09:02/ 0 赞/ 109 阅读

相关若依前后端分离版怎样修改主页面和浏览器上的图标和标题

场景使用若依的前后端分离版，，其默认的图标和标题等如下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

矫情吗；*/ 2023年10月05日 09:16/ 0 赞/ 114 阅读

相关 vue项目修改浏览器图标

首先打开项目目录： ![在这里插入图片描述][20191012100448130.png] 找到index.html：在index.html的head中添加：

待我称王封你为后i/ 2023年06月06日 14:26/ 0 赞/ 155 阅读

相关怎么在vue项目中的浏览器网页标题添加小图标

1、在Vue项目文件夹目录中找到index.html 2、将所需图标放在static目录下为什么放在static目录下，而不是放在src目录下呢？

约定不等于承诺〃/ 2023年06月06日 03:38/ 0 赞/ 45 阅读

相关 VUE修改页面的标题

重点代码 meta:{ title:'首页'} 完整代码 import Vue from 'vue' import Router from

﹏ヽ暗。殇╰゛Y/ 2022年11月29日 03:20/ 0 赞/ 214 阅读

相关 Vue 动态修改网页标题和图标

VUE2：二、普通方案，使用Vue-Router的beforeEach拦截 routes: [{ path: '/',

川长思鸟来/ 2022年11月07日 01:44/ 0 赞/ 1069 阅读

相关 vue修改网站名称和图标

在项目中找到public文件夹下面的index.html 修改如下图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

迷南。/ 2022年09月02日 00:52/ 0 赞/ 374 阅读

相关浏览器地址栏和标题栏显示的小图标

ICO图标的制作第一步，简单的ICO图标只需要一张图片，JPG、PNG、GIF都可以。可以用GIF就意味着你还可以做个有动画效果的高级图标O(∩\_∩)O，不过

àì夳堔傛蜴生んèń/ 2022年06月17日 06:44/ 0 赞/ 299 阅读

相关 vue修改浏览器的标题和图标

一，改标题内容方法一：直接在public/index.html中修改title即可，如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk

旧城等待，/ 2021年07月25日 12:47/ 0 赞/ 943 阅读

相关 vue-cli3.0修改浏览器中的小图标

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

雨点打透心脏的1/2处/ 2021年07月24日 23:47/ 0 赞/ 622 阅读