SvelteKit中.html URL转无后缀URL的301重定向最佳实践

最符合SvelteKit风格的方式是通过全局Server Hook批量处理所有.html后缀的URL，无需为每个路由单独配置，具体步骤如下：

1. 创建全局Server Hook文件 #

在项目根目录下创建hooks.server.js（SvelteKit 1.x及以上版本使用该文件处理服务端钩子）。

2. 编写重定向逻辑 #

在hooks.server.js中添加以下代码，自动匹配所有.html结尾的请求并301重定向到去掉后缀的路径：

import { redirect } from '@sveltejs/kit';

export async function handle({ event, resolve }) {
  const { pathname } = event.url;

  // 处理普通页面的.html后缀（如/foo.html → /foo）
  if (pathname.endsWith('.html') && pathname !== '/index.html') {
    const newPath = pathname.slice(0, -5);
    throw redirect(301, newPath);
  }

  // 单独处理根目录的index.html → /
  if (pathname === '/index.html') {
    throw redirect(301, '/');
  }

  return resolve(event);
}

方案优势 #

• 全局生效：一次配置覆盖所有旧的.html格式URL，无需逐个路由修改
• 符合框架设计：利用SvelteKit的服务端钩子机制，属于官方推荐的中间件式处理方式
• 维护成本低：后续新增页面无需额外配置重定向规则

单个路由的特殊处理（可选） #

如果仅需针对某个特定页面配置重定向（比如单独的/bar.html），可以在对应路由的+page.server.js中编写逻辑：

在src/routes/bar/+page.server.js中添加：

import { redirect } from '@sveltejs/kit';

export async function load() {
  throw redirect(301, '/bar');
}

这种方式适合少量特殊页面，但批量场景下还是全局Hook更高效。

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