相关疑难解决方法(0)

首先，我只想说这是我的第一个 Web 应用程序项目。在过去的几天里，我一直在努力寻找如何将前端和后端放在一起的答案。我有很多问题，但我想回答的主要问题是如何从后端端点返回我的前端“最终产品”。

我的理解是这样的（如有错误请指正）：

• 前端代码由客户端（浏览器）运行。
• 当客户端与网页交互时，前端根据需要对后端进行 API 调用以检索/修改数据。
• 后端和前端通常是单独开发的，并且可以托管在单独的服务器上。
• 但是，可以（并且可能更简单）将其托管在单个域/服务器上。我希望这样做，以避免 CORS 带来的一系列问题。

那么接下来的问题就来了：

当我想测试我的前端并看看它进展如何时，我只需运行npm run start. 然后，我访问给定的网址（通常http://localhost:8080/），并且可以访问我开发的前端。当我想部署它时，我运行npm run build，它给了我一个dist文件夹（捆绑在一起并缩小）。

如果我想在本地运行和测试我的后端，就像我正在使用的那样FastAPI，我只需运行uvicorn main:app --reload.

如何将两者放在一起？更具体地说，在我的后端代码中，如何返回前端工作的产品（即文件dist夹？）。我尝试过以下方法（简化）：

@app.get("/", response_class=HTMLResponse)
def root():
    return open("../frontend/dist/index.html", "r").read()

但是，当然，这只给了我静态 html，没有 React 组件。

我意识到这篇文章可能包含错误的假设和糟糕的做法（在这种情况下，我很抱歉！并且我将不胜感激任何更正/建议。）但是，如果可以回答以下问题，我将不胜感激。我提出的这些问题有望帮助我在计算机上本地测试整个 Web 应用程序。

1. 如何针对GET域根端点处的请求返回前端工作的结果？
2. 如果我的 Web 应用程序有页面 A、页面 B 和页面 C，每个页面都有 url www.example.com/A、www.example.com/B、 ，www.example.com/C我是否必须创建三个单独的 React 前端项目？即，相当于拥有三个dist文件夹？处理这个问题的标准方法是什么？

我正在尝试让 FastAPI 与 Svelte 一起工作。我已经使用 Svelte 构建了静态文件，现在我尝试通过 FastAPI 提供它们。问题是构建的 Svelte 文件global.css从根目录引用，这意味着我无法将它们安装在子文件夹中。

相反，我必须将它们安装在 root 上：

app.mount("/", StaticFiles(directory="web/public", html=True), name="web")

然而，这使得路由（函数装饰器）中定义的任何内容都无法访问。

是否可以同时定义静态文件和函数？任何一个，

a) 路由优先，如果没有路由，它会尝试从静态目录中读取

b) 静态目录优先，我指定了一个排除路径，该路径改为路由