SvelteKit官方RealWorld示例生成静态站点部署Firebase遇错求助

错误分析 #

构建时出现两个核心问题：

1. 预渲染页面中尝试访问url.searchParams（预渲染阶段无真实请求URL，无法获取查询参数）
2. 包含actions的页面被强制预渲染（actions是服务器端交互逻辑，不支持预渲染）

具体修改步骤 #

1. 处理url.searchParams访问错误 #

找到src/routes/+page.server.js中的load函数，修改查询参数的获取逻辑，增加预渲染环境判断，避免在预渲染时访问searchParams：

/** @type {import('./$types').PageServerLoad} */
export async function load({ url, prerendering }) {
  // 预渲染时使用默认值，非预渲染时获取真实查询参数
  const page = prerendering ? 1 : Number(url.searchParams.get('page')) || 1;
  const tag = prerendering ? null : url.searchParams.get('tag');
  const author = prerendering ? null : url.searchParams.get('author');
  const favorited = prerendering ? null : url.searchParams.get('favorited');

  // 后续业务逻辑保持不变
  const articles = await getArticles({ page, tag, author, favorited });
  return { articles };
}

2. 禁止包含actions的页面被预渲染 #

对所有包含actions的页面（如login、register、editor、settings、文章详情页等），在对应的+page.server.js文件中添加prerender: false，覆盖全局布局的预渲染设置：

示例：src/routes/login/+page.server.js

export const prerender = false;

export const actions = {
  default: async ({ request, locals }) => {
    // 原有action逻辑
  }
};

同样修改以下页面的+page.server.js：

• src/routes/register/+page.server.js
• src/routes/editor/+page.server.js
• src/routes/editor/[slug]/+page.server.js
• src/routes/settings/+page.server.js
• src/routes/article/[slug]/+page.server.js

3. 调整静态适配器配置 #

修改svelte.config.js，设置fallback: 'index.html'，让客户端路由处理非预渲染的动态页面：

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

export default {
    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: 'index.html', // 启用客户端路由 fallback
            precompress: false,
            strict: true
        })
    }
};

完成以上修改后，重新执行npm run build即可正常生成静态文件，部署到Firebase时确保build目录被正确上传。

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