使用adapter-static时，如何不改文件结构修改SvelteKit页面输出路径？

你的问题核心是reroute钩子仅在开发环境（运行时）生效，静态构建时预渲染阶段不会生成/blog/first这类路径的文件，导致直接访问时返回404。以下是两种无需修改原文件结构的解决方案：

方案一：动态路由+预渲染重定向 #

在不改动原blog/content下文件的前提下，新增动态路由来映射路径：

1. 创建src/routes/blog/[slug]/+page.js，添加重定向逻辑：

export async function load({ params, redirect }) {
  // 永久重定向到content下的对应页面
  return redirect(301, `/blog/content/${params.slug}`);
}

2. 在src/routes/blog/+layout.js中配置预渲染条目，确保构建时生成目标路径的静态文件：

export const prerender = true;

// 列出所有需要映射的文章slug，比如你的first
export async function entries() {
  return [{ slug: 'first' }];
  // 如果有多个文章，可以从数据源动态获取slug列表
}

构建后，/blog/first会生成静态重定向页面，访问时自动跳转到/blog/content/first，同时客户端路由也能正常工作。

方案二：SvelteKit路由重写+静态服务器配置 #

1. 在svelte.config.js中添加路由重写规则（处理客户端路由）：

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    routes: {
      rewrite: [
        // 匹配/blog/xxx，重写到/blog/content/xxx
        {
          source: '/blog/:slug(.*)',
          destination: '/blog/content/:slug'
        }
      ]
    }
  }
};

export default config;

2. 配置静态服务器的重定向规则
   静态构建不会自动生成/blog/first的文件，需在静态服务器中添加重写规则：

• Nginx配置示例：

location ~ ^/blog/(?!content/)(.*)$ {
  return 301 /blog/content/$1;
}

• Netlify：在项目根目录创建_redirects文件

/blog/*  /blog/content/:splat  301!

• Vercel：在vercel.json中添加

{
  "rewrites": [
    { "source": "/blog/:slug", "destination": "/blog/content/:slug" }
  ]
}

该方案无需新增路由文件，但需依赖静态服务器配置处理直接访问/blog/first的场景。

原reroute钩子无效的原因 #

reroute是客户端路由钩子，仅在浏览器中通过SvelteKit的客户端导航时生效。当用户直接在地址栏输入/blog/first或刷新页面时，请求会先到达静态服务器，而服务器中没有对应文件，直接返回404，不会触发客户端的reroute逻辑。

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