vue3前端打包集成到后端fastAPI的uvicorn服务器

需求

最近有个非常小的web项目是用的vue3+fastapi前后端分离构建的,因为想在服务器上使用fastapi的uvicorn服务器快速启动,所以需要把前端的vue3打包集成到后端,所以就有了以下这些操作,记录下来分享与大家,共勉.

环境搭建

新建一个项目目录,机构如下:

fastapi 环境搭建

先安装依赖:

pip install "fastapi[all]"

然后在fastapi目录中创建main.py的入口文件.

from fastapi import FastAPI
import uvicorn as uvicorn

@app.get('/test')
def test():
    return 'fastapi + vue3'

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

运行该文件,可以看到fastapi的后端环境搭建完毕.

前端vue3 环境

在项目的根目录的终端下输入:

npm init vue@latest

起好目录的名字:vue3,然后一路回车即可.

  cd vue3
  npm install
  npm run dev

一切正常的话,就会看到前端的vue3的欢迎界面了.

打包vue3项目整合到fastapi

首先打包vue3项目,在vue3的终端下打包前端项目:

npm run build

目录下会生成一个dist的目录,这个目录就是打包后的前端文件,把这个目录复制或移动到fastapi目录下,接下来,我们来配置fastapi的静态目录和首页,使之直接显示前端的页面.

fastapi配置静态目录和html的响应

首先导入依赖:

from fastapi.responses import HTMLResponse  # 响应html
from fastapi.staticfiles import StaticFiles # 设置静态目录
import os # 组装目录

然后设置静态目录,这里的StaticFiles参数是一个path,先组装path在填入参数即可.

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.mount("/assets", StaticFiles(directory=os.path.join(BASE_DIR, 'fastapi/dist/assets')), name="assets")

创建站点默认首页的html,这里我们直接读取前端index.html的代码,直接响应返回即可.

@app.get("/")
def main():
    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'dist', 'index.html')
    html_content = ''
    with open(html_path) as f:
        html_content = f.read()
    return HTMLResponse(content=html_content, status_code=200)

启动fastapi,直接打开默认地址就会发现前端已经整合到了fastapi里了.下边是完整的main.py的代码:

import os
from fastapi import FastAPI
import uvicorn as uvicorn
from fastapi.responses import HTMLResponse  # 响应html
from fastapi.staticfiles import StaticFiles # 设置静态目录

app = FastAPI()
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.mount("/assets", StaticFiles(directory=os.path.join(BASE_DIR, 'fastapi/dist/assets')), name="assets")

@app.get("/")
def main():
    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'dist', 'index.html')
    html_content = ''
    with open(html_path) as f:
        html_content = f.read()
    return HTMLResponse(content=html_content, status_code=200)

@app.get('/test')
def test():
    return 'fastapi + vue3'

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

有什么问题,可以留言哦,谢谢.