vue项目更改网页标题与图标

最新推荐文章于 2024-06-18 16:02:17 发布
最新推荐文章于 2024-06-18 16:02:17 发布
阅读量1.9k 收藏 3
点赞数 3
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48085286/article/details/114462070
版权
本文介绍了基于vue-cli2.9.6构建的Vue项目中，如何修改index.html页面的标题，添加静态文件夹下的图标，并运行项目。此外，还分享了如何在线将图片转化为图标，提供了一个在线转换网站。通过这些步骤，你可以轻松定制Vue项目的初始设置。
摘要由CSDN通过智能技术生成

1.基于vue-cli2.9.6的一个vue工程，找到index.html
在这里插入图片描述
2.修改网页的标题
在这里插入图片描述
3.添加图标语句，将图标放在static文件夹下面。

  <link rel="icon" type="image/x-icon" href="static/123.ico">

4.运行项目

在这里插入图片描述
5.如何将图片转换成图标，有一个在线转换的网址。
https://www.easyicon.net/covert/
在这里插入图片描述
6.到这里就完成了！！！！

苏苏哇哈哈
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue--修改项目浏览器页面的文字和图片
jieweiwujie的博客
10-17 2033
vue--修改项目浏览器页面的文字和图片
vue修改网页的标题
丹
10-29 570
注意：如果是嵌套路由，我们可能获取不到嵌套路由的标题。这时候我们只需要修改为 // 全局前置守卫，设置页面标题 router.beforeEach((to, from, next) => { // to and from are both route objects. must call `next`. // document.title = to.meta.title; document.title = to.matched[0].meta.title; console.log(..
vue如何修改网页的图标，title
jie_ge_a的博客
04-14 790
最简单的方法就是找到你的 public\index.html 文件 // 图标 <link rel="icon" href="<%= BASE_URL %>logo.png"> <link rel="shortcut icon" type="image/x-icon" href="./logo.png"> // title <title>这里写title</title> ...
vue如何修改项目的图标
最新发布
xiao_qiang666的博客
06-18 283
1、可以去阿里巴巴图标库下载一个.jpg .jpeg .gif .png等图像格式的图片，使用转换工具，转为.ico文件。图片转换工具：https://www.bitbug.net/打开vue项目找到public文件夹下的.ico文件替换就可以了。
vue项目修改浏览器顶部的标题和图标！
海贼王某人的博客
10-14 1471
看一下实现的效果： 代码奉上： <link rel ="shortcut icon" type="image/x-icon" href="./logo.png"> <title>海行后台</title> 直接找到index.html把文件修改一下即可解决，如果没显示就刷新或者从新运行一下项目： 项目目录如下： ...
vue2项目设置浏览器标题title及图标logo
小韩要快乐！
03-26 3781
vue2 修改网页标题和图标
手把手教你更改Vue项目图标
不愧是暮言的博客
08-15 5594
除了使用第三方图标库外，你还可以自定义样式，使用项目中的自定义图标。这需要你自己设计和绘制图标，并将其转化为字体文件（通常使用SVG格式）
Vuecli3 替换网站图标
Ton555555的博客
07-29 505
场景 第一步 在public 换掉原图标 第二步 pwa Vue.config.js 加上 pwa module.exports={ pwa: { iconPaths: { favicon32: 'favicon.ico', favicon16: 'favicon.ico', appleTouchIcon: 'favicon.ico', maskIcon: 'fa
vue修改浏览器的标题和图标
Zt0118的博客
04-06 2258
一，改标题title 方法一：直接在public/index.html中修改title即可，如下： 方法二： 在main.js中添加一下代码 Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } }) 再在app.vue中添加： v-title data-title="自己的标题内容" 如图： 一，改图标 把图片名字改一下
vue项目改图标_VUE3 项目自定义修改网页标题和图标
weixin_39526546的博客
12-19 1271
VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。1 标题修改标题修改直接在项目的 /public/index.html中修改title标签即可。明月网址导航2 图标修改这个修改相对来说，需要以下几个步骤。1)首先做一个ico的小图标，命名为 favicon.ico 放在 /pu...
Vue项目中如何引入icon图标
08-27
本文的标题“Vue项目中如何引入icon图标”详细介绍了在Vue项目中如何引入icon图标的方法。该文章通过图文并茂的形式，向读者展示了详细的引入icon图标的步骤。 描述解释 文章的描述部分“主要介绍了Vue如何引入icon...
如何更改VUE项目运行名称以及Logo图标
Echosansa的博客
04-20 6024
第一步、打开VUE项目，找到public文件夹 第二步、再打开index.html文件， 第三步：修改title里面的文字信息（修改运行名称） 运行时效果（运行名称） 第四步：进入阿里巴巴字体图标库内（修改Logo） 第五步：选中图标点击下载（修改logo） 第六步：选择png格式下载 第七步：保存图片后，在线搜索图片png转ico格式工具，实现在线转换 第八步：把转换成ico格式的图片寸放至项目public文件内 第九步：打开index.html文件.
怎么修改vue项目图标和标题
09-16
要修改 Vue 项目的图标和标题，需要在 Vue 项目的 public 目录下添加 favicon.ico 文件作为图标，并在 index.html 中通过标签修改标题。 具体步骤如下： 1. 在 public 目录下添加图标 favicon.ico 2. 在 index....
vue-cli3.0设置页面icon图标
热门推荐
qq_40816649的博客
05-25 1万+
最近做的一个项目中在用vue-cli3.0创建项目的时候不小心选择了pwa这一个插件，碰到了不能设置网页图标的问题。 在最新的vue-cli3.0直接在index.html中设置icon是不行的，需要在vue.config.js中设置一个pwa属性。 pwa: { iconPaths: { favicon32: './plug_jchLogo.png', fav...
vue2项目 修改 页面上面的logo
m0_62336925的博客
07-28 223
如何 更换vue的图标_如何使用vue.js将按钮替换为图标
weixin_33364627的博客
12-29 548
I want to include an icon or image instead of a button. since, i have taken "input type="file" i am not able make this button as an icon. Is there any way to add (+ icon) inside the div border? In tha...
Vue2 动态修改浏览器标题和图标
ssy001128的博客
06-07 1031
第二步：在build文件下webpack.dev.conf.js、webpack.prod.conf.js的HtmlWebpackPlugin内加入favicon:path.resolve(‘favicon.ico’)代码。第二步：在build文件下webpack.dev.conf.js、webpack.prod.conf.js的HtmlWebpackPlugin内加入title:config.title代码。第三步：在index.html中修改title。操作完成后重启即可，一定要重启！
vue项目设置浏览器icon图标
weixin_48398799的博客
05-07 3861
在vue项目开发中往往会设计到浏览器头部图标的设置，这里分享一下自己在项目中的使用的方法，如有不足的地方还望指正，直奔主题：
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值