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再次封装基础组件文档