基于 FastAPI 和 Vue3 的生产管理系统代码示例，包含动态路由、状态管理和工艺流程的逻辑

最新推荐文章于 2025-09-15 17:13:08 发布

原创

最新推荐文章于 2025-09-15 17:13:08 发布 · 1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#fastapi

1. 环境搭建

后端（FastAPI）

安装FastAPI和Uvicorn：
```
pip install "fastapi[all]"
```

创建一个main.py文件，编写基本的FastAPI应用：

from fastapi import FastAPI
import uvicorn

app = FastAPI()

@app.get("/test")
def test():
    return {"message": "FastAPI + Vue3"}

if __name__ == "__main__":
    uvicorn.run(app='main:app', host="127.0.0.1", port=8000, reload=True)

前端（Vue3）

在项目根目录下创建Vue3项目：
```
npm init vue@latest
```
进入项目目录并安装依赖：
```
cd vue3
npm install
npm run dev
```

2. 前后端集成

在Vue3项目中，使用Vite构建工具进行打包：
```
npm run build
```
将打包后的dist目录复制到FastAPI项目中。

在FastAPI中配置静态文件服务：

from fastapi.staticfiles import StaticFiles
from fastapi.responses import HTMLResponse
import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

app.mount("/dist", StaticFiles(directory=os.path.join(BASE_DIR, 'fastapi/dist')), name="dist")
app.