600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > vue-cli3 vue项目 动态修改favicon.ico(浏览器顶部小图标)

vue-cli3 vue项目 动态修改favicon.ico(浏览器顶部小图标)

时间:2023-10-02 23:23:47

相关推荐

vue-cli3 vue项目 动态修改favicon.ico(浏览器顶部小图标)

1、需求

最近产品提了一个需求——一个项目适配于不同公司(即只需要更换logo和基础文案即可)故 需要动态切换favicon.ico展示(即浏览器顶部小图标)

2、最终实现效果如下图

3、两种解决办法

一、第一种解决办法(度娘搜索大多使用此法)

在App.vue文件中如下操作

this.appType = process.env.VUE_APP_TYPE // (全局的动态变量)// 根据不同appType来显示不同的.ico文件// 修改favicon文件changeFavicon () {let favicon = document.querySelector('link[rel="icon"]')// console.log('app', favicon)if (favicon !== null) {favicon.href = this.appType == 'dr' ? '/favicon.ico' : '/faviconkb.ico'} else {favicon = document.createElement('link')favicon.rel = 'icon'favicon.href = this.appType == 'dr' ? '/favicon.ico' : '/faviconkb.ico'document.head.appendChild(favicon)}},

二、第二种解决办法(根据webpackCofig变量)

在vue.config.js和index.html文件中如下配置

4、相关文章

基于ElementUi&Antd再次封装基础组件文档

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。