SvelteKit应用部署后无法加载，显示模板占位符求助

核心问题 #

你上传整个应用文件夹的操作是错误的，服务器返回未解析的占位符，是因为你没有上传SvelteKit构建后的生产文件，而是上传了源码目录里的模板文件。

具体原因 #

源码里的app.html是SvelteKit的模板文件，其中%sveltekit.head%、%sveltekit.body%这些占位符，只有在执行npm run build时才会被替换成实际的页面内容。如果你直接把源码里的app.html传到服务器，服务器会把它当作普通静态HTML文件返回，不会处理这些占位符。

正确部署步骤 #

1. 本地执行npm run build完成构建，此时会生成一个构建输出目录（默认适配器的话是build文件夹；如果使用adapter-node，输出目录是.svelte-kit/output；如果是adapter-static，也是build）
2. 只将这个构建输出目录里的所有文件上传到服务器的网站根目录，不要上传项目的源码、node_modules、.git等无关文件
3. 额外注意：
   • 如果你用的是adapter-node这类需要运行Node服务的适配器，还要在服务器上安装项目依赖（上传package.json和package-lock.json，执行npm install --production），然后通过node build/index.js启动服务
   • 如果你用的是adapter-static，需要确保服务器配置了SPA fallback规则，比如Nginx要添加try_files $uri $uri/ /index.html;，否则刷新页面会404

你提供的app.html代码 #

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %sveltekit.head%
    </head>
    <body data-sveltekit-preload-data="hover">
        <div style="display: contents">%sveltekit.body%</div>
    </body>
</html>

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