前言:
整理vue/vue3项目中修改界面浏览器上面的文字和图标的方法。
效果:
vue2/vue3: 默认修改
public/index.html index.html
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/svg+xml" href="图标地址" />
<title>显示文字</title>
... //图标放在public里面
js:动态修改
动态修改文字
javascript
let title = "新的标题"; // 设置新的标题
document.title = title; // 动态修改网站标题
动态修改icon图标
javascript
function changeFavicon(link) {
let $favicon = document.querySelector('link[rel="icon"]');
if ($favicon !== null) {
$favicon.href = link;
} else {
$favicon = document.createElement("link");
$favicon.rel = "icon";
$favicon.href = link;
document.head.appendChild($favicon);
}
}
let iconUrl = "新的图标地址"; // 设置新的图标地址
changeFavicon(iconUrl); // 动态修改网站图标