在Vercel部署Waline 出现favicon.ico 404错误的解决办法

ZEROKAMI STUDIO网站VlogValinevercel

在Vercel部署Waline是十分方便快捷的，但是在浏览器访问的时候会出现
GET ./favicon.ico net::ERR_CONNECTION_TIMED_OUT。

这个问题并不会影响到它的正常运行，仅影响到浏览器标签页网站图标的显示。

对于我来说，有点影响美观了，所以开始着手解决这个问题。

分析

我们点开浏览器的报错信息，它说明了favicon.ico这个文件访问超时，那我们就点开来看看。

favicon.ico打开后不是图标，而是一个报错信息：{"errno":404,"errmsg":"url /favicon.ico not found."}

说明并不存在favicon.ico这个文件。那么问题的解决就很简单了，让它可以访问就行了。

解决问题

解决这个问题有很多种方法。首先就是最简单最无脑的：上传一份favicon.ico就行了。

上传favicon.ico

由于我是在Vercel上部署的Waline，连接的是Github。所以我的文件自然是在Github中上传，直接上传至Github库的根目录试试看。

但结果是显而易见的——失败。

对，没有任何效果，可能是还需要修改什么东西吧。这个得要看看这里面都有些啥，在分析分析，如果是自己没接触过的还得去找资料，已经想要放弃了。

但是，我们还有第二简单的方法-Vercel的重定向功能！

只需要简单添加个网址，重定向到自己博客的favicon上就行了，如果后期变更了，也不用手动重新上传文件，一举两得啊！

在Vercel重定向favicon.ico

Vercel重定向很简单，直接在Github库中修改vercel.json就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "comment",
  "github": {
    "silent": true
  },
  "builds": [
    {
      "src": "robots.txt",
      "use": "@vercel/static"
    },
    {
      "src": "index.cjs",
      "use": "@vercel/node"
    }
  ],
  "rewrites": [
    {
      "source": "/((?!robots\\.txt$).*)",
      "destination": "index.cjs"
    }
  ]
}

这是部署Waline后的vercel.json文件，我们只需要在rewrites这里添加就行了。

1
2
3
4
{
  "source": "/favicon.ico",
  "destination": "https://zerokami.cn/favicon.ico"
},

将favicon.ico转跳到我博客网站的favicon.ico，各位可以根据自己的需要进行修改。按照规范的写法，我们添加以上的信息就行了。

需要注意的是 匹配顺序很重要。更具体的规则应该放在前面，通配规则放在后面，否则会导致规则无法执行。

修改后的vercel.json文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "name": "comment",
  "github": {
    "silent": true
  },
  "builds": [
    {
      "src": "robots.txt",
      "use": "@vercel/static"
    },
    {
      "src": "index.cjs",
      "use": "@vercel/node"
    }
  ],
  "rewrites": [
    {
      "source": "/favicon.ico",
      "destination": "https://zerokami.cn/favicon.ico"
    },
    {
      "source": "/((?!robots\\.txt$).*)",
      "destination": "index.cjs"
    }
  ]
}

那么大家可以等待Vercel重新部署后再强制刷新一下浏览器试试看，网站的图标就出来了，且没有任何的报错。

至此，问题就顺利的解决了，可喜可贺，可喜可贺啊~欸嘿。。