使用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

相关推荐
古希腊数通小白(ip在学)2 小时前
stp拓扑变化分类
运维·服务器·网络·智能路由器
12点一刻4 小时前
搭建自动化工作流:探寻解放双手的有效方案(2)
运维·人工智能·自动化·deepseek
未来之窗软件服务4 小时前
东方仙盟AI数据中间件使用教程:开启数据交互与自动化应用新时代——仙盟创梦IDE
运维·人工智能·自动化·仙盟创梦ide·东方仙盟·阿雪技术观
o不ok!5 小时前
Linux面试问题-软件测试
linux·运维·服务器
宇钶宇夕8 小时前
SIMATIC S7-1200的以太网通信能力:协议与资源详细解析
运维·服务器·数据库·程序人生·自动化
杰夫贾维斯8 小时前
CentOS Linux 8 的系统部署 Qwen2.5-7B -Instruct-AWQ
linux·运维·人工智能·机器学习·centos
CodeWithMe9 小时前
【Note】Linux Kernel 实时技术深入:详解 PREEMPT_RT 与 Xenomai
linux·运维·服务器
muyun28009 小时前
安全访问云端内部应用:用frp的stcp功能解决SSH转发的痛点
运维·安全·ssh·frp
AI迅剑10 小时前
模块三:现代C++工程实践(4篇)第三篇《C++与系统编程:Linux内核模块开发入门》
linux·运维·服务器