SvelteKit应用部署在Flask中无法正常渲染的问题

看起来你踩了个SvelteKit部署的常见坑——那些%sveltekit.head%和%sveltekit.body%是SvelteKit的服务器端模板占位符，说明你现在返回的还不是最终可以直接用的静态HTML文件，而是需要SvelteKit运行时处理的模板！

先给你理清楚问题出在哪：你直接用Flask返回了SvelteKit build目录下的模板文件，但这个文件本身是给SvelteKit的Node.js服务器用的，Flask只是原封不动把占位符内容返回给浏览器了，自然没法渲染出应用。要让Flask能正确托管SvelteKit应用，你得先把SvelteKit构建成纯静态的产物，具体步骤如下：

第一步：安装SvelteKit的静态适配包 #

SvelteKit默认的构建产物不是纯静态的，需要用adapter-static来生成完全静态的HTML文件：

npm install @sveltejs/adapter-static --save-dev

第二步：修改SvelteKit配置文件 #

打开项目根目录的svelte.config.js，替换成下面的配置，指定用静态适配器，并开启预渲染：

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			// 构建产物输出目录，默认是build，和你Flask里的路径对应上
			pages: 'build',
			assets: 'build',
			fallback: null,
			precompress: false
		}),
		// 开启默认预渲染，让所有页面都生成静态HTML
		prerender: {
			default: true
		}
	}
};

export default config;

第三步：重新构建SvelteKit应用 #

运行构建命令，生成纯静态的产物：

npm run build

第四步：调整Flask代码适配静态产物 #

现在build目录里的都是完整的静态HTML、CSS和JS文件了，修改你的Flask代码：

from flask import Flask, send_from_directory

# 把static_folder指向SvelteKit的build目录
app = Flask(__name__, static_folder='build', static_url_path='')

# 处理根路径请求
@app.route('/')
def serve_root():
    return send_from_directory('build', 'index.html')

# 处理所有其他路由，适配SvelteKit的客户端路由
@app.route('/<path:path>')
def serve_static_files(path):
    # 如果请求的是具体文件，直接返回；否则返回index.html（处理SPA路由）
    try:
        return send_from_directory('build', path)
    except:
        return send_from_directory('build', 'index.html')

if __name__ == '__main__':
    app.run(debug=True)

为什么之前的方法不行？ #

你之前访问Flask返回的index.html是SvelteKit的服务器模板文件，这个文件需要SvelteKit的Node.js服务器来替换占位符、生成真实的页面内容。但Flask只是简单地把文件内容原封不动返回给了浏览器，浏览器不认识这些占位符，所以就直接显示出来了。而用adapter-static构建后，SvelteKit会提前把所有占位符替换成真实的HTML内容，生成可以直接用的静态文件，Flask只需要托管这些静态文件就可以正常渲染应用了。

如果你的应用有动态路由（比如/posts/[id]这种），记得在svelte.config.js里把fallback设置为'index.html'，这样刷新动态路由页面时，Flask会返回index.html，由SvelteKit的客户端路由来处理，避免出现404。

备注：内容来源于stack exchange，提问作者petercli