vue 项目修改网页 title 和 图标

已于 2022-08-04 17:27:07 修改
阅读量1.7k 收藏 1
点赞数 1
分类专栏： 实践 文章标签： vue.js ui 前端 javascript
于 2022-03-16 14:55:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51622532/article/details/123526349
版权

修改网页 title 和 图标

网页 title 位置 和 图标位置
在这里插入图片描述
修改路径在 项目文件下的 public 文件夹下的 index.html 文件中的 title 里面
在这里插入图片描述

// 在html 中 引入文件
<link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon">

title修改 是 title 标签中

图标修改 是 同等级目录中 有一个 favicon.ico 的文件，直接把需要改变的图标改为同名的文件名，直接替换

小辣机呀
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目中如何引入icon图标
08-27
主要介绍了Vue如何引入icon图标,本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下
vue项目设置浏览器标题title及图标
Aaron_杀死庸碌的博客
07-14 9413
方法一：在vue.config.js文件，添加如下代码： 方法二：直接在public/index.html中修改title即可，如下： 二、动态设置标题方案 方法一：通过路由导航守卫设置，使用Vue-Router的beforeEach拦截 方法二：使用插件vue-wechat-title来设置浏览器动态标题 三、图标修改 1、首先做一个ico的小图标，命名为 favicon.ico 放在 /public/下面，替换原有的 favicon.ico，需要可以备份原有的 favicon.ico。 2、在 /pub
Vue3 项目修改index.html的 title
northcastle的博客
11-20 1237
vue3 项目中修改index.html 中的 title
vue2项目设置浏览器标题title及图标logo
最新发布
小韩要快乐！
03-26 1045
vue2 修改网页标题和图标
vue html title,vue动态设置页面title的方法实例
weixin_39690625的博客
06-21 1258
本文主要介绍了Vue动态修改title的方法，需要的朋友可以参考学习，方法如下：1.通过自定义指令去修改(单个修改比较好)//1.在main.js 页面里添加自定义指令Vue.directive('title', {//单个修改标题inserted: function (el, binding) {document.title = el.dataset.title}})//2.在需要修改的页面里添...
如何更改vue项目窗口的标题title和图标icon
Asanshi的博客
09-09 9207
更改vue项目窗口的标题和图标
20.VUE3 项目自定义修改网页标题和图标
weixin_47254130的博客
06-03 1450
VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。 1 标题修改 标题修改直接在项目的 /public/index.html中修改title标签即可。 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
vue项目静态修改标题+动态修改标题
weixin_45711931的博客
04-27 1953
上面说到方法一不能使用中文标题，但是在public目录下的index.html文件中的title标签是可以改为中文的，将title标签原本的内容（默认的内容为package.json的name属性值的链接）删掉（注意：如果不删掉仅是注释的话，标题会出现注释语句），写上你想要的中文或其他。注意：在package.json文件中修改name属性，好像只能使用英文小写，英文大写和中文都不可以（我也不知道为啥）动态修改标题只需要在你想要修改标题的页面（.vue后缀）文件中添加下面这句代码即可。
修改Vue网页标题和图标文档
胖儿の博客
04-18 707
与src文件同级的文件夹。
HTML技能点--设置网页图标标志
热门推荐
程序员大阳
05-09 1万+
网页标签页的图标大家想必都不陌生，就是在网页标题文本左侧的图标。 大多数情况下，我们都会去设置网页标题，以便于区分网页。 实际上如果能为网页添加一个图标标志，那就更加高端大气上档次哈。
vue+webpack项目中设置页面title的方法---kalrry
kalrry
02-19 1876
vue+webpack项目中设置页面title的方法---kalrry一、使用vue的自定义指令二、设置html title三、vue中配置vue.config.js四、HtmlWebpackPlugin插件五、动态设置页面title六、以上每种做完重启项目便可 一、使用vue的自定义指令 <div v-title>{{htmltitle}}</div> ... directives: { title: { inserted: function (el, bindin
聊聊Vue 中 title 的动态修改问题
10-16
主要介绍了 Vue 中 title 的动态修改问题，文中通过两种方案给大家介绍了title的传递问题 ,需要的朋友可以参考下
vue 实现路由跳转时更改页面title
10-16
今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目添加动态浏览器头部title的方法
01-21
Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex （本项目已经封装h5的sessionStorage和localStorage也可以存在这里面） ( 3 ) 设置 title （1）从路由...
vue element项目引入icon图标的方法
12-07
为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定...
前端框架 Nuxt3 Vue3 修改网页favicon.ico 顶部 小图标
qq_50909707的博客
12-14 2637
前端框架 Nuxt3 Vue3 修改网页favicon.ico 顶部 小图标
vue设置网页title
zluz_的博客
09-25 1万+
最近用vue来做一个项目，到结尾的时候发现一个问题：不管开的是哪个组件的路由地址，网页的title都是index.html里面的title。下面总结一下解决的办法： 原先我使用的是document.title =to.meta.title来改变网页标题。 大家都知道使用Vue框架开发的应用是个单页面应用，里面用到的是路由的形式，并不像多页应用开发那样（下面附带区别）。所以想让网页的标题随着路由的改变而改变可以使用下面这个方法，目前已解决。 第一步：找到 router 文件夹下的index.js文件，在此引
前端 vue 修改页面的名称和图标
giao序员
11-22 4571
修改图标 在 index.html 的heade标签中加入 href 图片路径 修改名称head中的 title标签就是修改名称。
<title>网页标题</title>前设置图标
05-05
您可以在网页的<head>标签中添加以下代码来设置网页图标： ```html <link rel="icon" href="图标路径" type="image/x-icon"> ``` 其中，`图标路径`为你要设置的图标的路径，可以是相对路径或绝对路径。`type="image/x-icon"`指定了图标的MIME类型为ico格式。例如，如果要在网页中使用名为`favicon.ico`的图标，可以这样写： ```html <head> <title>网页标题</title> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值