vue 按条件修改网页图标icon

vue 按条件修改网页图标icon

概要

同一个产品可能是不同用户在使用，可以为不同的用户提供定制化的网站图标

-

目录下public/index.html作为html模板文件被用来为页面提供一个基本的骨架。
在这个文件中，通过模板语法设置网站图标。

<link id="icon-link" rel="icon" href="<%= BASE_URL %>favicon.png">

-

main.js文件作为入口文件，我们可以在这里对App进行最初始化的设置。

// 修改网页图标
document.addEventListener('DOMContentLoaded', (event) => {
  const iconLink = document.getElementById('icon-link');
  if (iconLink) {
    let iconPath = '/favicon.png';
    if (window.location.hostname.includes('hxn')) {
      iconPath = '/favicon2.jpg';
    }
    iconLink.href = iconPath;
  }
});