Vue.js开发：移除URL路由部分以正常加载网站Favicon

当你的this.url包含路由路径（比如example.com/home）时，直接拼接/favicon.ico会生成错误的路径（https://example.com/home/favicon.ico），导致Favicon无法加载。要解决这个问题，核心是提取URL的根域名部分，忽略后续的路由。

推荐使用浏览器原生的URL API来处理，相比手动字符串切割更可靠，能兼容各种URL格式：

// 提取根域名的工具函数
getRootDomain(rawUrl) {
  // 处理输入是否带协议的情况
  const targetUrl = rawUrl.startsWith('http') ? rawUrl : `https://${rawUrl}`;
  const parsedUrl = new URL(targetUrl);
  // 返回主机名（不含路由和协议）
  return parsedUrl.hostname;
}

// 生成正确的Favicon URL
this.favurl = `https://${this.getRootDomain(this.url)}/favicon.ico`;

说明 #

• 不管输入的this.url是example.com/home、https://example.com/about还是www.example.com/blog/post，URL对象都会准确解析出主机名（如example.com或www.example.com）。
• 拼接后得到的路径始终是根域名下的/favicon.ico，符合绝大多数网站Favicon的默认存放位置。

内容的提问来源于stack exchange，提问作者Julian Bausch