使用python库uvicorn替代Nginx发布Vue3项目

目录

一、Vue3项目打包

二、将打包文件放到python项目

三、配置uvicorn服务

四、启动服务


【SpringBoot版传送门:使用SpringBoot替代Nginx发布Vue3项目_苍穹之跃的博客-CSDN博客

一、Vue3项目打包

(博主vue版本:3.2.44)

由于是要放在FastAPI中,接口服务和Web服务用的是同一个端口,所以我们给前端一个统一的URL前缀来区分前端页面和后端接口。比如:/admin;配置方式如下:在src/router文件夹下找到路由文件,注意要用history模式,不要用哈希。

至于打包,就跟平时打包到nginx一样的去打包就行了。(不要添加base参数,画蛇添足!)

二、将打包文件放到python项目

在python项目中新建文件夹static,然后将打包好的vue包复制进去。

三、配置uvicorn服务

新建api_service.py文件作为入口类

①静态文件映射

②配置VueRouter路由的反向代理

③强制让JS文件的MIME类型为application/javascript

完整代码如下↓↓↓

python 复制代码
import uvicorn
from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from starlette.middleware.base import BaseHTTPMiddleware
from starlette.responses import HTMLResponse

app = FastAPI()

app.mount("/", StaticFiles(directory="static"), name="/")


# 静态文件代理
class RedirectToIndexMiddleware(BaseHTTPMiddleware):
    async def dispatch(self, request: Request, call_next):
        # 排除静态文件
        if not request.url.path.endswith((".js", ".css", ".png", ".ico")):
            # 只拦截指定前缀
            if request.url.path.startswith("/admin/") or request.url.path == "/admin":
                return HTMLResponse(content=request.app.index_html, status_code=200)
        response = await call_next(request)
        return response


# 读取index.html
with open("static/index.html", encoding='utf-8') as f:
    app.index_html = f.read()
# 添加中间件
app.add_middleware(RedirectToIndexMiddleware)


# 自定义JS文件的MIME类型为application/javascript
@app.middleware("http")
async def override_static_file_mimetype(request, call_next):
    response = await call_next(request)
    if request.url.path.endswith((".js")):
        response.headers["content-type"] = "application/javascript"
    return response


# 添加中间件
app.add_middleware(RedirectToIndexMiddleware)

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000)

四、启动服务

浏览器访问:http://localhost:8000/admin

相关推荐
東雪蓮☆22 分钟前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
Miraitowa_cheems1 小时前
LeetCode算法日记 - Day 38: 二叉树的锯齿形层序遍历、二叉树最大宽度
java·linux·运维·算法·leetcode·链表·职场和发展
青铜发条1 小时前
【python】python进阶——网络编程
运维·服务器·网络
勇闯逆流河2 小时前
【Linux】Linux常用指令合集
linux·运维·服务器
宇钶宇夕2 小时前
西门子 S7-200 SMART PLC: 3 台电机顺启逆停控制(下篇):逆序停止与安全保障实现
运维·自动化
的小姐姐2 小时前
RMS设备检修管理系统_HawkEye智能运维平台_璞华大数据
大数据·运维
努力努力再努力wz3 小时前
【C++进阶系列】:万字详解红黑树(附模拟实现的源码)
java·linux·运维·c语言·开发语言·c++
斯普信专业组3 小时前
多输入(input)多输出(output)验证
运维·服务器·网络·fluent-bit
白鹭3 小时前
apache详细讲解(apache介绍+apache配置实验+apache实现https网站)
linux·运维·apache·apache配置·apache实现https网站
Anthony_2313 小时前
MySQL的常用命令
运维·数据库·mysql·adb·docker