vue3编译打包,发布到fastapi静态目录下,显示空白页

前端

第一步:vite.config.ts(建议修改)

下面配置建议修改,改为相对路径:

export default defineConfig({
  base: './',   // ✅ 建议加上!!!
  build: {
    outDir: 'dist'
  },

第二步:测试

然后部署到 nginx 等简单的web服务器,观察是否可以正常访问,如果正常访问,说明打包没问题

fastapi

挂载静态目录顺序

挂载静态目录,必须 放在 所有路由的 下面,否则所有api全失效

from fastapi.staticfiles import StaticFiles
# 挂载静态目录
app.mount("/", StaticFiles(directory="static", html=True), name="static")

不能有下面代码

指定 / 路由,与上面静态网页根目录冲突

@app.get("/")
async def root():
    return {"message": "文件管理智能体 API", "version": settings.VERSION}

不能有下面代码

有下面代码,导致访问 .js、.css 文件,显示空白

@app.get("/{path:path}")
async def spa_route(path: str):
    return FileResponse("static/index.html")

测试访问

访问 http://127.0.0.1:8000/

注意:不要访问 http://localhost:8000/index.html ,否则显示空白页


原文出处:/show_1GW3MxzA5pmi.html