当系统在浏览器中打开时，浏览器页签会根据主页配置中的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);
}
}
在获取系统配置后，调用此方法，动态修改title和Favicon
