收到 500：尝试在部署到 GitHub Pages 的 SvelteKit 应用程序上显示来自 +page.server.ts 的数据时发生内部错误

Question

我正在使用 SvelteKit 和 TailwindCSS 构建一个网站，该网站使用

markedjs

将 Markdown 文件转换为 HTML，并将其显示在网页上。我正在使用

gh-pages

将此网站部署到 GitHub Pages。这涉及使用 Svelte 的

adapter-static

生成静态 SvelteKit 内容。我在显示生成的 HTML 时遇到了问题：

在本地，网站可以正常运行，生成的 HTML 可以正确显示。当我部署到 GitHub 时，我会在应该显示 HTML 的页面上看到一个初始的

500: Internal Error

。如果我刷新页面，内容就会加载。以下是相关代码片段：

// +page.server.ts

import {marked} from 'marked';
import {error} from '@sveltejs/kit';
import { readFileSync } from 'node:fs';

function parseBlogpost(name: string) {
  const f = readFileSync('./src/routes/blog/hello_world.md', 'utf8');
  return marked.parse(f);
}

/** @type {import('./$types').PageLoad} */
export function load({params}) {
  try {
    const content = parseBlogpost(params.slug);
    return {
      post: {
        content: content
      }
    };
  } catch(err) {
      throw error(500, {
        message: "Failed to load blog content",
      })
  }
}

// +page.svelte

<script>
    import "../../../app.css";
    export let data;
</script>

<div>
    {@html data.post.content}
</div>

我可以看到静态站点输出中生成的

__data.json

（在

./build

中）。这些也是 GitHub Pages 上控制台产生的错误：

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
...
GET https://ali-mir.com/blog/hello-world/__data.json?x-sveltekit-invalidated=01 404 (Not Found)

我遇到了一个单独但类似的问题，Tailwind CSS 样式表在 GitHub 上未被识别。我必须在

appDir

文件中将

app

更改为

__app

（而不是

svelte.config.js

），但我不确定这个下划线路径问题是否相关。我对 SvelteKit 和前端总体来说很陌生，所以如果有任何不清楚的地方请告诉我！

我已经在我的

layout.js

文件中设置了这个集合，我相信它会在静态构建中生成

__data.json

文件：

export const prerender = true;
export const trailingSlash = 'always';

Answer 1

有趣的错误！你尝试过不再像个书呆子吗？我认为这对您的情况有很大帮助！

祝一切顺利:)