vue项目动态设置浏览器标签页的图标

最新推荐文章于 2024-08-21 11:23:23 发布

总想发呆的小木木

最新推荐文章于 2024-08-21 11:23:23 发布

阅读量730

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lalalalamjm/article/details/135969117

版权

在App.vue中的onBeforeMount钩子中写入

假设图标地址为 http://dev-merchant.kppay.cc/kefu_icon/QQ.png

let link: any = document.querySelector("link[rel*='icon']") || document.createElement("link");

link.type = "image/x-icon";

link.rel = "shortcut icon";

link.href = 'http://dev-merchant.kppay.cc/kefu_icon/QQ.png';

document.getElementsByTagName("head")[0].appendChild(link);

即刻生效

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

总想发呆的小木木

关注关注

10
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

如何设置浏览器标签图标

m0_52116878的博客

03-15

3571

如何设置浏览器标签图标

【浏览器】【vue】修改网页上的页签图标

jieweiwujie的博客

01-20

3035

document.querySelector("link[rel='icon']");

1 条评论您还未登录，请先登录后发表或查看评论

vue设置浏览器ico图标

fakuangjingling的博客

12-20

2059

【代码】vue设置浏览器icon图标。

vue 页签图标(icon)修改设置

Kevin_Rose的博客

07-05

441

如果图标不是 svg 格式，而是 ico 格式，将上面代码中 type="image/svg+xml"替换为 type=“image/x-icon”

vue 动态设置系统在浏览器中的标题title和图标favicon

宁静致远

04-06

1845

vue动态修改系统title和favicon

Vue中设置浏览器标签栏图标以及title

前端-卡布达的博客

02-12

1万+

1、设置浏览器标签栏图标使用脚手架创建的项目，已经将标签栏图标设置好了，默认的是vue的图标。如果需要修改，只需要将public文件夹下面的favicon.icon文件替换为我们自己的图标即可 2、浏览器标签栏title修改 title的修改有很多种方法，我使用的是路由配置中的路由元信息结合路由导航钩子来实现的 import Vue from 'vue' import VueRouter from 'vue-router' import Login ...

vue项目中浏览器图标的设置

最新发布

m0_57022950的博客

08-21

182

3.组件内使用（监听路由直接赋值）2.main.js 引入。

为VUE-CLi2项目自定义title标签页小图标

whylost

05-19

1497

初始图标如图 1. 在项目根目录（index.html同级目录）下添加favicon.ico文件 2. 在项目index.html中引入图标 <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> 3. 配置webpack配置文件(build文件夹下面) 在 webpack.dev.conf.js 和 webpack.prod.config.js 中添加如下代码 favicon: path.resolve(

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

weixin_39526546的博客

12-19

1305

VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。1 标题修改标题修改直接在项目的 /public/index.html中修改title标签即可。明月网址导航2 图标修改这个修改相对来说，需要以下几个步骤。1)首先做一个ico的小图标，命名为 favicon.ico 放在 /pu...

解决Vue项目打包成dist放在Django中浏览器图标失效、页面跳转路由失效问题

sinat_37864181的博客

03-16

1435

自定义标题

【网站搭建】完整部署django+uwsgi+nginx

qq_45780842的博客

04-08

624

云服务器上部署django + nginx + uwsgi，配置实例详细过程以及加载静态文件的方式。

vue项目自定义网页标签栏上的小图标

yyanglirong的博客

04-26

3362

今天上司要求我更改我写的vue项目的小图标，百度之后，还有点麻烦，需要我们自己去制作图标，但因为我们公司直接给了我图片，所以修改起来很是方便，首先第一步，在pubic文件下新建img文件，将图标放在该目录下，并重命名为favicon.ico 然后直接打开index.html文件进行替换 <link rel="icon" href="./img/favicon.ico" /> 然后我...

浏览器标签栏的图标设置，meta,innerWidth,innerHeight

qq_38301396的博客

05-12

307

浏览器标签栏的图标设置 <link rel="shortcut icon" href="图标地址">

vue项目中在浏览器标题中设置小图标

鲁小班的博客

08-07

705

本例是以vue项目为前提第一步：将公司logo或者自己想要放的图片转换成ico格式的图片此处推荐转换网址http://www.bitbug.net/ 第二步：将生成的favicon.ico在、放在static的目录下第三步：在index.html中引入即可 <link rel="icon" href="/static/favicon.ico" type="image/x-...

Vue项目中添加页面标签页的小图标

qq_41709082的博客

08-08

4865

Vue项目中添加页面标签页的小图标 1.找到 build 文件夹中的 webpack.prod.conf.js文件 // webpack.prod.conf.js ... //找到这一配置项 new HtmlWebpackPlugin({ ... }); 添加 favicon 属性 2.找到 build 文件夹内的 webpack.dev.conf.js 文件 // webp...

vue项目如何修改项目在页面上展示的图标

04-26

您可以通过修改根目录下的 `public` 文件夹中的 `favicon.ico` 文件来修改展示的图标。如果您想使用不同的图片，您可以替换它，并且还需在 `public/index.html` 文件中将 `<link rel="icon">` 标签中的路径指向新的图片。但需要注意的是，不同的浏览器可能对图标的显示方式存在差异，因此最好准备不同大小的图标并将其用于不同的浏览器。