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

当系统在浏览器中打开时，浏览器页签会根据主页配置中的title和favicon显示，如何能根据系统配置，动态的更换title和icon呢？

vue中的配置

vue项目中默认是在index.html页面上设置的

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><!--favicon 图标--><link rel="shortcut icon" type="image/x-icon" href="<%= BASE_URL %>favicon.ico" /><title>系统名称</title></head>
</html>

动态修改

在日常开发中，无论是单机部署还是saas应用，都会面临对系统的个性化设置，所以根据系统配置，动态修改title和icon是经常遇到的需求。

1、title

可以直接使用 document.title 来设置页面的标题
浏览器支持：所有主要浏览器都支持

2、favicon

Favicon 是显示在浏览器标签上的标志，一般为当前网站的Logo，用于快速识别系统或网站。

静态设置示例

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

动态设置

根据静态设置的原理，我们只要动态的修改ffavicon的href地址，就可以动态配置化显示了
代码示例：(vue+ts)

interface Element {href?: string;
}
const defaultLink: Element = {href: '',
};
/*** 修改网站Favicon * @param newIconPath Favicon 地址*/
export function changeFavicon(newIconPath: string) {if (!newIconPath) {return false;}let link: Element = defaultLink;link = document.querySelector('link[rel="shortcut icon"]') as Element;if (link && link.href) {link.href = newIconPath;} else {const newLink = document.createElement('link');newLink.rel = 'shortcut icon';newLink.href = newIconPath;document.head.appendChild(newLink);}
}
/*** 修改网站标题* @param title*/
export function changeTitle(title: string, icon: string) {if (title) {document.title = title;}if (icon) {changeFavicon(icon);}
}