如何让 FastAPI 为 Vue 3 执行 SSR？

Question

根据 Vue 的 SSR 文档，可以使用 node.js 渲染应用程序并使用 Express 服务器返回它。 FastAPI 可以做同样的事情吗？

或者使用 Jinja2 模板或 SPA 是唯一的解决方案吗？

问题：

• 无 SPA：帮助进行 SEO
• 无 SSG：将生成太多页面。有些需要动态生成。
• 没有 Jinja2/Python 模板：不会构建、捆绑和提供节点模块。所有模块都必须通过远程包 CDN 提供服务。

我有一种感觉，也许更改 Vue 3 分隔符然后构建项目并将文件作为 Jinja2 模板提供是解决方案，但我不确定它如何与 Vue 的路由器一起使用。我知道 /dist 文件夹可以在默认路由上提供服务，然后使用一个包罗万象的可以用来显示确实存在的文件。

可能的解决方案

@app.get("/", response_class=FileResponse)
def read_index(request: Request):
    index = f"{static_folder}/index.html"
    return FileResponse(index)


@app.get("/{catchall:path}", response_class=FileResponse)
def read_index(request: Request):
    path = request.path_params["catchall"]
    file = static_folder + path

    if os.path.exists(file):
        return FileResponse(file)

    index = f"{static_folder}/index.html"
    return FileResponse(index)

问题

• 如果有一种方法可以使用 FastAPI 和 Vue 3 进行 SSR，那是什么？
• 如果没有直接的方法，如何将 Vue 内置的 /dist 与 Jinja2 模板结合起来提供动态页面？

Answer 1

有多种可用选项，例如 Nuxt.js、Quasar 和 Gridsome，它们通过 FastAPI 和 Vue 3 提供对 SSR 的支持。