如何在 FastAPI 中加载 index.html

Question

I built my app in Vue and my backend using FastAPI in Python. After I did npm run build I copied the dist folder into the templates folder. I want to load index.html but I got the error error_aborted 404 (not found) . The static folder is inside templates folder. Why am I getting this error?

from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

templates = Jinja2Templates(directory="templates")
app.mount("/static", StaticFiles(directory="templates"))

@app.get("/")
def serve_home(request: Request):
    return templates.TemplateResponse("index.html", context= {"request": request})

I also tried the following code, and putting the dist folder in the static folder with no templates folder.

@app.get("/")
async def index():
    return FileResponse('static/index.html', media_type='text/html')

Answer 1

replace this:

app.mount("/static", StaticFiles(directory="templates"))

with this:

app.mount("/", StaticFiles(directory="templates"))