When StaticFiles mounts a VUE project, when refreshing the page, it prompts: Not Found

[wantgroup]

def register_mount(app: FastAPI):
"挂载静态文件前端页面"
my_logger.info("注册前端页面成功！！！")
app.mount("/", StaticFiles(directory=static_dir, html=True), name=b_root)

[sinisaos]

@wantgroup First you need to build your Vue app using npm run build (or whatever package manager you use) and then move the dist folder to the static folder of your FastAPI app. Something like this will enable the Vue app on page refresh.

import os

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

STATIC_PATH = os.path.join(os.path.dirname(__file__), "static")

app = FastAPI()


def register_mount(app: FastAPI) -> None:
    app.mount(
        "/",
        StaticFiles(directory=os.path.join(STATIC_PATH, "dist"), html=True),
        name="static",
    )


register_mount(app)

The directory structure is this.

.
├── app.py
└── static
    └── dist
        ├── assets
        │   ├── index-D6YOZ1Wq.css
        │   └── index-GTf1oZOv.js
        ├── index.html
        └── vite.svg

3 directories, 5 files

Hope this helps.