fastapi如何结合vue项目使用

1. vue项目的vue.config.js设置assetsDir: 'static'，项目里所有的后端请求都改为相对请求的方式，即不要加ip:端口或域名
   设置打包格式
2. 经过以上设置后，打包的文件同一层级包含index.html、static两个文件，将static下的所有文件剪切到与index.html的同一层级
3. 在fastapi项目下新建static文件夹，将以上包含index.html、css、js相关的全部文件移入该文件夹下，项目配置:

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

# 配置1，添加静态资源
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
# 配置2，添加根索引路径
@app.get("/")
def main():
    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static', 'index.html')
    html_content = ''
    with open(html_path,encoding='utf-8') as f:
        html_content = f.read()
    return HTMLResponse(content=html_content, status_code=200)

• 经过以上配置，一个前后端分离模式的fastapi项目就大功告成了
• 扩展，由于经常需要调试，配置跨域:

origins = ["*"]  # 这里添加允许跨域的域名或主机:端口,*为允许所有域访问后端
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)