解决文章链接地址末尾无.html访问问题

解决文章链接地址结尾无.html访问问题

使用Hexo构建静态网页托管在cloudflare Pages后我发现文章链接地址为/xxx.html或xxx都可以访问，以为是默认就可以的，后来迁移vercel发现了并不是默认就可以，而是需要另外重写链接的。

解决问题

解决方法：编写以下重定向规则

如果是Vercel那么在项目的根目录里面新增一个vercel.json文件后写入以下内容，若为其他静态托管平台请自行查阅如何编辑重写规则

{
  "rewrites": [
    {
      "source": "/:slug*",
      "destination": "/:slug*.html"
    }
  ]
}

内容解释

以下为AI生成的解释：

vercel.json 配置文件是用来在 Vercel 平台上配置特定的路由重写规则（Rewrites），可以帮助你实现自定义的 URL 路径结构。下面是对这个配置文件和其原理的详细解释。

vercel.json 文件

vercel.json 是一个配置文件，用来为你在 Vercel 上托管的应用设置自定义的行为。通过这个文件，你可以定义一些如重写（rewrites）、重定向（redirects）、自定义构建配置等规则。这个文件允许你精确控制你的应用如何响应请求、如何处理路由等。

代码解析

{
  "rewrites": [
    {
      "source": "/:slug*",
      "destination": "/:slug*.html"
    }
  ]
}

这段配置主要是通过 重写规则（Rewrites） 来实现对 URL 路径的处理。

rewrites 的作用

• rewrites 用来处理 URL 重写。它允许你将一个请求的 URL 重写到另一个 URL，而不改变浏览器的地址栏显示（即，用户访问的路径不会改变，但请求的资源或页面可能会改变）。
• 重写规则在请求到达服务器时生效，处理 URL 后，服务器根据新的 URL 路径来查找并返回对应的资源。

配置的具体含义

{
  "source": "/:slug*",
  "destination": "/:slug*.html"
}

• source: 表示匹配的原始 URL 路径。在这里，/:slug* 表示任意以 / 开头的路径，并且 slug 部分是一个占位符，代表动态的部分。* 是一个通配符，意味着后面可以匹配任意长度的路径。

  举个例子，如果用户访问 /about 或 /blog/2025/01/26，这些路径都会被 :slug* 匹配。

• destination: 指定了请求被重写后的目标 URL。在这里，/:slug*.html 表示将匹配到的路径重写成加上 .html 后缀的路径。例如，如果访问的是 /about，就会重写成 /about.html；如果访问的是 /blog/2025/01/26，就会重写成 /blog/2025/01/26.html。

原理

• 无后缀路径问题： 默认情况下，Vercel 会把请求的路径作为文件夹或文件来查找资源。如果你的网页是静态 HTML 文件（如 about.html），但没有 .html 后缀，Vercel 会尝试根据路径自动查找匹配的文件，可能找不到。这个重写规则的目的是通过自动将请求的 URL 后缀转换为 .html 来解决这个问题。

  比如，用户访问 /about，Vercel 默认会去查找一个名为 about 的资源，但如果你的文件名是 about.html，它可能无法自动识别为 .html 文件。通过重写规则，将 /about 重写成 /about.html，就可以确保 Vercel 正确地查找并返回你所期望的文件。

• 保持 URL 清洁： 使用这个重写规则后，用户仍然可以通过不带 .html 后缀的 URL 访问网站，而实际文件是带有 .html 后缀的。这种方式让你的 URL 看起来更简洁、干净。

适用场景

• 如果你的网站有很多静态 HTML 文件，并且希望用户访问时不带 .html 后缀（例如，/about 而不是 /about.html），可以使用这种方法进行 URL 重写。
• 有时，这种做法也是为了兼容某些 SEO 或用户体验上的要求，因为很多时候 URL 中不含文件扩展名的路径更符合规范，也让链接看起来更加简洁。

总结

通过在 vercel.json 中添加这个重写规则，你可以实现自动将没有 .html 后缀的 URL 转换为带 .html 后缀的路径，从而确保静态文件能够正确被 Vercel 服务器找到并返回。同时，这种方式保持了 URL 的整洁和简洁，提升了用户体验。

完结撒花！

 

鸣心/Write