vue 3.0项目标题icon根据域名动态修改显示不同favicon

最新推荐文章于 2024-11-26 11:11:45 发布
最新推荐文章于 2024-11-26 11:11:45 发布
阅读量1.7k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： favicon vue3.0 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43837305/article/details/112793439

文章目录

前言

本人项目是vue3.0 cli项目，是多域名公用的前台项目，所以一个icon不能支持很多域名的项目同时使用。

提示：以下是本篇文章正文内容，下面案例可供参考

一、favicon

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

vue3.0引入的icon应该是如上所示，通过环境配置的。

二、动态修改

1.域名动态判断

代码如下（示例）：
这个判断写在入口文件index.html中（www.baidu.com和blog.youkuaiyun.com是举例说明）

window.onload
最低0.47元/天 解锁文章

200万优质内容无限畅学
vue脚手架项目的详解
weixin_68658847的博客
02-16 3785
vue脚手架项目的详解
web 前端实现一个根据域名的判断 来显示不同的logo 和不同的标题
阿乐的博客
02-06 848
有可能我做一个后台 web端 我想实现一套代码的逻辑 显示不同的公司主题logo以及内容，但是实际上 业务逻辑一样。这样这些字段就成为了一个全局的变量 显示在页面上就可以了。建一个store oem.ts 这个名为是 oem系统。
【前端小技能】一个项目中，不同页面使用不同的favicon.ico
球球博客
01-31 678
如何在一个项目中，使用多个ico文件，根据页面动态修改ico文件
vue中动态跟新 favicon.ico；＜link rel=“icon“ href=“＜%= BASE_URL %＞favicon.ico“＞
HeMister的博客
01-31 3321
因为第一次加载成功后就会有缓存（再vue项目，请各位大神解惑为啥）相同域名首次加载成功后，会被缓存无法更改，首次加载不成功可以有效。updateFavicon 内容。其次再router守卫 处理。不href控制会被缓存。
Vue项目根据条件更改title与favicon.ico
最新发布
lenglovexu的博客
11-26 529
可以是服务端返回文件的接口也可以是前端项目的静态资源路径（可以把不同的favicon.ico放在不同的文件夹下）。
动态修改网页中的favicon.ico图标
weixin_46481039的博客
10-26 324
提示：动态修改网页中的favicon.ico图标提示：以下是本篇文章正文内容，下面案例可供参考。
vue favicon设置以及动态修改favicon的方法
12-07
最近写公司项目时，动态更新favicon 动态更新之前需要有一个默认的favicon。 目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。 favicon图片放到该文件夹下。 然后再index.html中添加： <...
vue3修改link标签默认icon无效问题详解
10-16
在Vue3中，修改`link`标签默认的`icon`可能会遇到一些问题，尤其是在尝试替换浏览器的导航栏小图标（通常称为favicon）时。本文将深入探讨这个问题，并提供解决方案。 首先，我们需要理解Vue3项目的目录结构。在Vue...
使用Nuxt重构已有Vue项目(Axios默认根域名、切换Vuetify字体、配置Mavon编辑器和常见异常解决localStorage/window/document is not defined)
"✧treasure mountain✧"
05-23 6983
近日用Vue写了个小项目 但由于Vue的特性 导致项目的SEO并不是很好 因此用Nuxt重构了该项目 对项目进行了一次优化 由于之前并没有相关的经验 因此遇到不少的坑 特此记录一下 一、概念 什么是Nuxt Nuxt.js是Vue.js的通用框架 常用来作服务器端渲染(Server Side Rendering 简称SSR) Vue适合用于开发SPA单页面应用 但因其数据绑定特性 导致爬虫只能爬取页面模板 并不能爬到渲染好的数据 不利于网站排名 对于公司内部网站等不需要排名的网站 可以不用SEO 但对于那些
vue3.0设置浏览器icon和动态修改页面title
Catherine_G的博客
10-12 9002
文章目录设置浏览器icon设置页面title方法一：router改document.title方法二：使用vue-meta插件总结： 设置浏览器icon 启用了pwa: 参考文章：vue3.0设置浏览器icon 文件结构 vue.config.js中设置： 注：vue.config.js是vue-cli的配置文件，可选，可参考：全局-cli-配置 pwa: { iconPaths: {...
vue-cli3 vue项目 动态修改favicon.ico(浏览器顶部小图标)
wocwin的博客
08-17 5428
vue-cli3 vue项目 动态修改favicon.ico(浏览器顶部小图标)
vue-cli项目设置浏览器地址栏图标的几种方法以及不同的域名使用不同的域名logo和域名title
Smile_Monica的博客
08-25 3535
1.直接引入，即把favico.ico放到static目录下，在index.html中直接引入即可，如下： 2.可以在build/webpack.dev.conf.js中进行配置，这个时候，index.html中就不需要再使用link引入了 追加！！！ 需求：我不同的域名，包装成不同的产品，使用不同的首页以及不同的域名logo和域名title 修改方法： //修改域名logo ...
Vue3动态设置网页icon图标
h2790832998的博客
12-18 1745
【代码】Vue3动态设置网页icon图标。
Vue 动态修改网页标题和图标
林中明月间丶
03-10 5449
VUE2： 二、普通方案，使用Vue-Router的beforeEach拦截 routes: [{ path: '/', name: 'home', component: () => import('@/pages/home/index'), meta:{ keepAlive: true } }, { path: '/person/auth, name: 'personAuth',
vue3.0动态循环icon点击变色，再次点击取消选中
Jet_Lover的博客
01-24 1407
先看效果图 点击后发生改变 开始上代码 html部分 <div class="left-circle"> <div class="whole-circle" ref="wholeCircle"></div> <div class="whole-list"> <ul> <li v-for="(item, index) in newAr
动态设置网站窗口标签栏图标favicon.ico
weixin_45979091的博客
10-26 858
index.html中。
vue中动态修改网页图标
一条咸鱼的blog
05-12 2350
当针对不同客户需要提供不同的图标时，页面其他图标好替换，但是网页图标就不太一样了，查阅之后提供如下方法： <script> let headHTML = document.getElementsByTagName('head')[0].innerHTML; let baseUrl = "<%= BASE_URL %>" headHTML += '<link rel="icon" href="'+baseUrl+pt_logo+'.ico"&g
vue3实现响应式切换地址栏favicon.ico图标
weixin_44221214的博客
11-07 819
利用响应式来进行图标的动态更新 思路：编写一个useFavicon的函数，在函数中定义一个更新图标的方法，和一个响应式数据变量，并在内部监听该响应式变量，当发生改变就调用更新的方法。 function useFavicon(newIcon?:string){ const favicon = ref(newIcon) function update(icon){ //匹配头部关于icon的link document.head.querySelectorAll('Link[rel*="
VUE设置浏览器icon图标
CatEatApple的专栏
03-15 1001
Vue怎么设置左上角icon图标呢？步骤如下： （1）、提前把icon图标copy到static目录下 （2）、在index.html页面添加&lt;link rel ="shortcut icon" type="image/x-icon" href="static/favicon.ico"&gt; （3）、保存页面刷新浏览器即可 ...
Vue3.0项目搭建完全指南：详细步骤与配置解析
本文主要总结了使用Vue 3.0搭建项目的过程，详细阐述了各个环节的配置步骤，包括环境配置、ESLint配置以及SVG图标处理。 1. 环境配置 ...在实际操作中，开发者应根据项目需求灵活调整配置，以达到最佳效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值