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

Question

我现在想用Svelte(kit)开发一个聊天机器人项目，因为我对这个前端框架有一些经验，但现在遇到了一些问题，需要帮助。

我使用Flask作为后端，并为一个HTML网页应用设置了服务器。不过，我尝试按照这个页面的思路，从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 命令在 public 文件夹中重建代码。

不过，你想要同时启动 Svelte 示例的 rollup 服务器和 Flask 服务器。为了确保 Svelte 应用程序的请求能够转发到 Flask 服务器，需要定义一个代理。
为此，我建议安装“rollup-plugin-dev”这个插件，并在 rollup.config.js 文件中进行相应的配置，具体可以参考 这篇文章。

但是，如果你因为示例的年代久远而决定创建一个新项目，你会发现 Rollup 已经被 Vite 替代，并且 Svelte 应用程序的结构也稍微有些变化。现在不再需要插件。不过，在 vite.config.js 文件中配置一个代理是必要的，以便将获取随机数字的请求重定向。你可以在 这里找到相关的说明。

为了能够使用 Flask 提供的完整应用程序，我还建议安装一个适配器。在这种情况下，可以使用 “adapter-static”，其生成的结果可以放在 Flask 应用程序的 static 文件夹中。这需要在 svelte.config.js 文件中调整 pages 和 assets 属性的路径名称。

在使用 Flask 创建后端时，重要的是要确保 static 文件夹在 URL 前缀下不可访问，这是一种标准做法。为此，在实例化应用程序时，可以将 static_url_path 属性设置为空字符串。
现在你只需要添加一个路由，当 Flask 服务器被访问时，能够提供 index.html 页面作为静态内容，这样就完成了。