在 SvelteKit

如何解决在 SvelteKit

我刚刚开始使用 svelteKit 并阅读了 documentation。我想在我的应用程序中使用 SSG 并预渲染每个页面。我按照文档中的说明配置了我的应用，但似乎没有像描述的那样工作。

我想要达到的目标：

1. SSG（预渲染）

在构建时将静态内容（例如 <h1>、<p>）生成为 HTML。不要用 JS 对客户端的页面进行水合。我想尽可能避免这种情况，它增加了加载时间，一些用户禁用了 JS，并且它对 SEO 不友好。 我真的看不出你为什么这样做有什么好处。用JS生成数据只有在数据变化的时候才有用吧？ 我也看不出“无水化”和“预渲染”之间有什么区别。

2.禁用 SSR

不要在服务器上运行代码并呈现页面或请求。那么我可以假设 localStorage 等可用。

3.不使用节点服务器打开应用

这不是那么重要，但如果应用程序只需在我的浏览器中在本地打开 index.html 文件就可以工作，那就太好了。然后它可以与 Github Pages 一起使用。在构建用纯 svelte 编写的应用程序后，您可以如何做。

4.仅限 svelteKit

如果只配置 svelteKit 就足够了。无需任何外部库或不同 svelte 框架的帮助。

我尝试过的

这里有一个关于 github 的例子。 在第一个目录中是生成生成的可重现示例。 第二个大概是我希望构建给我的输出，这是我手动编写的。

我开始了新的 svelteKit 项目并通过 npm i -D @sveltejs/adapter-static@next 安装了静态适配器。 然后我设置 svelte.config.js 文件：

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess(),kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',adapter: adapter(),ssr: false,hydrate: false,prerender: {
            crawl: true,enabled: true,}
    }
};

export default config;

因为我在全局范围内关闭了 ssr，所以我认为使用 localStorage 是安全的。所以我在我导入的外部脚本（store.js）中使用了它。但是在构建时我收到了这个错误信息：

我还注意到它说“构建 SSR 包”，我想知道为什么是这样...

当我查看构建时，每个元素仍然用 JS 呈现，只是在浏览器中打开它是行不通的。

这就是我想说的，感谢您的阅读和帮助！

Edit1：有点想通了第一部分。
Hydration 仅呈现必要的内容。所以其他可以被预渲染成 HTML。客户端路由器是使用 JS 渲染的主要原因。所以我启用了水合作用并禁用了路由器。但是当启动应用程序时，什么都不会出现。所以我不得不启用 ssr（即使我不想）。
这就是svelte.config.js的变化：

ssr: true,hydrate: true,router: false

现在内容按照我想要的方式生成，但启用了 ssr。