fastapi vue渲染

### 在 FastAPI 中渲染 Vue 组件或页面

为了在 FastAPI 应用程序中集成并渲染 Vue 组件或页面，可以采用前后端分离架构的方式。前端使用 Vue 构建单页应用(SPA)，而后端则由 FastAPI 提供 API 接口以及静态资源服务。

#### 配置 FastAPI 作为静态文件服务器

FastAPI 可以通过 `StaticFiles` 来提供静态文件支持，这允许将构建好的 Vue SPA 放置于特定目录下并通过 FastAPI 进行分发[^1]：

from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

# 挂载静态文件夹到/static路径上
app.mount("/static", StaticFiles(directory="dist"), name="static")

templates = Jinja2Templates(directory="dist")


@app.get("/{full_path:path}")
async def serve_vue_app(request: Request, full_path: str):
    return templates.TemplateResponse("index.html", {"request": request})

上述代码片段展示了如何设置 FastAPI 项目来托管 Vue 的打包产物(`dist` 文件夹)。当访问任意路由时都会返回 `index.html`，从而让 Vue 路由接管剩余部分。

对于 Vue 方面，则按照常规方式创建和配置项目即可。需要注意的是，在开发阶段建议单独启动 Vue 开发服务器以便利用热重载等功能；而在生产环境中再统一部署至同一域名之下。

此外，如果希望进一步优化用户体验，还可以考虑引入诸如 CORS 头部处理等措施确保跨域资源共享正常工作。