单页应用
你可以通过在根布局中禁用 SSR,将任何使用任何适配器的 SvelteKit 应用转变为完全客户端渲染的单页应用 (SPA):
¥You can turn any SvelteKit app, using any adapter, into a fully client-rendered single-page app (SPA) by disabling SSR at the root layout:
export const const ssr: false
ssr = false;
大多数情况下不建议这样做:如果 JavaScript 失败或被禁用(比你想象的更频繁 会发生这种情况),它会损害 SEO,往往会降低感知性能,并使用户无法访问你的应用。
¥[!NOTE] In most situations this is not recommended: it harms SEO, tends to slow down perceived performance, and makes your app inaccessible to users if JavaScript fails or is disabled (which happens more often than you probably think).
如果你没有任何服务器端逻辑(即 +page.server.js
、+layout.server.js
或 +server.js
文件),则可以使用 adapter-static
通过添加后备页面来创建 SPA。
¥If you don’t have any server-side logic (i.e. +page.server.js
, +layout.server.js
or +server.js
files) you can use adapter-static
to create your SPA by adding a fallback page.
用法(Usage)
¥Usage
使用 npm i -D @sveltejs/adapter-static
安装,然后使用以下选项将适配器添加到你的 svelte.config.js
:
¥Install with npm i -D @sveltejs/adapter-static
, then add the adapter to your svelte.config.js
with the following options:
import import adapter
adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: any;
}
kit: {
adapter: any
adapter: import adapter
adapter({
fallback: string
fallback: '200.html' // may differ from host to host
})
}
};
fallback
页面是 SvelteKit 从你的页面模板(例如 app.html
)创建的 HTML 页面,可加载你的应用并导航到正确的路由。例如,Surge 是一个静态 Web 主机,它允许你添加一个 200.html
文件,该文件将处理任何不对应于静态资源或预渲染页面的请求。
¥The fallback
page is an HTML page created by SvelteKit from your page template (e.g. app.html
) that loads your app and navigates to the correct route. For example Surge, a static web host, lets you add a 200.html
file that will handle any requests that don’t correspond to static assets or prerendered pages.
在某些主机上,它可能是 index.html
或其他完全不同的东西 - 请查阅你平台的文档。
¥On some hosts it may be index.html
or something else entirely — consult your platform’s documentation.
请注意,无论
paths.relative
的值如何,后备页面始终包含绝对资源路径(即以/
而不是.
开头),因为它用于响应对任意路径的请求。¥[!NOTE] Note that the fallback page will always contain absolute asset paths (i.e. beginning with
/
rather than.
) regardless of the value ofpaths.relative
, since it is used to respond to requests for arbitrary paths.
Apache
要在 Apache 上运行 SPA,你应该添加一个 static/.htaccess
文件以将请求路由到后备页面:
¥To run an SPA on Apache, you should add a static/.htaccess
file to route requests to the fallback page:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^200\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /200.html [L]
</IfModule>
预渲染单个页面(Prerendering individual pages)
¥Prerendering individual pages
如果你希望某些页面被预渲染,你可以为应用的这些部分重新启用 ssr
和 prerender
:
¥If you want certain pages to be prerendered, you can re-enable ssr
alongside prerender
for just those parts of your app:
export const const prerender: true
prerender = true;
export const const ssr: true
ssr = true;