使用 Flask 作为后端，并使用 Sveltekit 作为前端

Question

我目前正在寻求使用 Svelte(kit) 开发一个聊天机器人项目，因为我已经对此前端有一些经验，并且我已经达到了需要帮助的地步。

我使用 Flask 作为后端，并为 HTML Web 应用程序设置了服务器。但是，我尝试使用此处的想法从 Flask 提供 Svelte 此页面。

但是每当我执行与示例相同的操作时，它就会像这样开始：

每当我想更新随机数时，它都会显示如下：

我对文件源代码位置所做的唯一更改：

return send_from_directory('frontend/public', path)

端口号：

app.run(debug=True,port=8080)

这是我的目录结构：

我需要什么来解决这个问题？我需要改变什么？

我在 HTML 中完成此操作没有任何问题，但是 Sveltekit 中的服务和路由不同。我真的很想学习前端的 Sveltekit，然后将其扩展到聊天机器人项目中。我的猜测是 Flask 没有从网页获取，因此没有更新。这是存储库的链接，一旦此代码运行，该链接将被删除github存储库

更新后控制台输出：

Answer 1

底层示例的基本思想是 Svelte 应用程序通过 Flask 服务器提供服务。为此，需要使用

npm run autobuild

在公共文件夹中重建代码。

但是，您正在尝试并行启动 Svelte 示例的汇总服务器和 Flask 服务器。为了保证Svelte应用程序的请求转发到Flask服务器，需要定义一个代理。
为此，我建议安装插件“rollup-plugin-dev”以及文件中的相应配置

rollup.config.js

，如本文中所述。

但是，如果您由于示例的年龄而决定创建一个新项目，您会发现 Rollup 已被 Vite 取代，并且 Svelte 应用程序的结构也发生了轻微变化。不再需要插件。然而，需要在文件

vite.config.js

中配置代理来重定向路由请求以获得随机数。您可以在此处找到相关说明。

为了您可以使用 Flask 中完成的应用程序，我还建议安装一个适配器。在本例中，“adapter-static”，其结果可以在 Flask 应用程序的 static

 文件夹中生成。这需要调整文件 

pages

 中属性 

assets

 和 

svelte.config.js

 的路径名。

使用 Flask 创建后端时，重要的是要确保无法使用 URL 前缀访问

static

 文件夹（按照标准）。为此，可以在实例化应用程序时将空字符串分配给属性 

static_url_path

。

现在您所要做的就是添加一个路由，一旦连接到 Flask 服务器，该路由就会将
index.html

 页面作为静态内容传送，然后就完成了。