FastAPI搭配Vite构建Vue3应用的路径配置问题求助

问题原因 #

之前的配置中，Vite的base: '/static/'会让前端路由和资源引用都带上/static/前缀，导致URL出现/static/login这类路径；同时刷新页面时，FastAPI无法正确匹配前端路由路径，引发报错。

解决方案 #

需要同步调整Vite和FastAPI的配置，让前端路由基于根路径，同时确保静态资源访问和路由fallback逻辑正常工作：

1. 修改Vite配置（vite.config.js）

将base改为根路径'/'，如果需要和原Vue2一样把打包文件输出到static目录，可指定build.outDir：

export default defineConfig({
  // 其他原有配置...
  base: '/',
  build: {
    outDir: 'static' // 可选，保持和原Vue2一致的打包目录；默认是dist，若用默认则后续FastAPI配置需对应修改
  }
})

2. 修改FastAPI配置（main.py）

调整静态文件挂载规则，并保留路由fallback逻辑，确保所有前端路由请求都返回index.html：

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from fastapi.responses import FileResponse

app = FastAPI()

# 挂载前端静态文件目录，这里directory对应Vite的打包输出目录（static或dist）
app.mount("/", StaticFiles(directory="static", html=True), name="static")

# 处理所有非静态资源的路径请求，返回index.html交由Vue路由接管
@app.get("/{full_path:path}")
def serve_vue_app():
    return FileResponse("static/index.html", media_type="text/html")

若Vite默认打包到dist目录，只需将上述代码中的directory="static"和FileResponse路径改为"dist"即可。

配置说明 #

• Vite的base: '/'确保前端路由和资源引用都基于根路径，URL不再带有/static/前缀。
• FastAPI的StaticFiles挂载根路径并开启html=True，能正确处理静态资源请求；/{full_path:path}路由则保证所有前端路由路径在刷新时都能返回index.html，让Vue路由正常解析路径。

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