如何配置FastAPI支持SPA应用的深层路径路由（如/foo/bar）

深层路径（如/foo/bar）加载失败的核心原因是：浏览器将静态资源的相对路径解析成了当前路径下的子路径（比如/foo/static/index.js），而非正确的根路径下的/static目录。以下是具体解决方案：

1. 修改Vite配置，强制生成绝对路径资源引用 #

在Vite配置文件（vite.config.js/vite.config.ts）中设置base为/static/，这样构建后的所有资源引用都会以根路径开头：

export default {
  base: '/static/',
  // 其他原有配置...
}

2. 确保index.html中资源引用为绝对路径 #

检查前端入口文件index.html里的JS、CSS引用，手动修正为绝对路径格式（设置Vite的base后，自动注入的资源会自动生成绝对路径，手动引用的资源需要额外注意）：

<script type="module" src="/static/index.js"></script>

3. 验证FastAPI静态资源挂载配置 #

确认frontend_path指向Vite构建后的产物目录（通常是dist文件夹），确保静态资源挂载逻辑正确：

frontend_path = "./dist"  # 替换为你的Vite构建产物目录
app.mount(
    "/static", StaticFiles(directory=f"{frontend_path}/static", html=True), "static"
)

4. 确认Vaadin Router路由模式 #

如果使用history模式（无#的路径），FastAPI的通配路由/{path:path}已经处理了路由回退问题，无需额外调整；如果暂时不想修改资源路径，也可以切换为hash模式（路径带#）规避相对路径解析问题，但推荐使用绝对路径方案以保证URL友好性。

完成以上调整后，无论访问任何深层路径，浏览器都会从根路径的/static目录加载资源，页面即可正常渲染。

内容的提问来源于stack exchange，提问作者Rami Mousleh