如何在托管于Vercel的Gatsby网站中设置301重定向？

结论 #

完全可以通过Vercel自身能力实现301重定向，无需依赖Gatsby Cloud。

• 第一步：在Gatsby项目根目录（和package.json文件同级位置）新建vercel.json文件，若项目中已有该文件，直接编辑即可。
• 第二步：在vercel.json中添加redirects配置项，所有重定向规则都写在这个数组里，参考配置如下：

{
  "redirects": [
    // 单路径重定向示例：旧地址/old-page 301跳转到/new-page
    {
      "source": "/old-page",
      "destination": "/new-page",
      "statusCode": 301
    },
    // 通配符匹配示例：所有/old-blog/*路径跳转到/new-blog/*
    {
      "source": "/old-blog/:slug",
      "destination": "/new-blog/:slug",
      "statusCode": 301
    },
    // 全匹配重定向示例：全站跳转到新域名
    {
      "source": "/(.*)",
      "destination": "https://你的新域名.com/$1",
      "statusCode": 301
    }
  ]
}

各参数作用说明：

• source：匹配用户访问的原始请求路径，支持命名参数、通配符匹配规则
• destination：重定向的目标路径，可直接复用source中匹配到的参数
• statusCode：重定向状态码，填301即为永久重定向，填302则为临时重定向
• 第三步：将修改后的vercel.json随项目代码一起提交到绑定Vercel的Git仓库，Vercel自动部署完成后，重定向规则即刻生效。

• 多条重定向规则按照从上到下的顺序匹配，命中第一条符合的规则后就会执行跳转，高频匹配的规则建议放在数组靠前位置
• Vercel侧的重定向规则优先级高于Gatsby自身的路由规则，不会和Gatsby的配置产生冲突

内容的提问来源于stack exchange，提问作者Ashutosh rai