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

灰太狼 2024-03-22 22:04 79阅读 0赞

**目录**

一、Vue3项目打包

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

三、配置uvicorn服务

四、启动服务

--------------------

【SpringBoot版传送门：[使用SpringBoot替代Nginx发布Vue3项目\_苍穹之跃的博客-CSDN博客][SpringBoot_Nginx_Vue3_-CSDN]】

#### 一、Vue3项目打包 ####

（博主vue版本：3.2.44）

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

至于打包，就跟平时打包到nginx一样的去打包就行了。（不要添加base参数，画蛇添足！）

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

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

![58c827b7194c4dbfa7a3d2d4bdd4763f.png][]

#### 三、配置uvicorn服务 ####

新建api\_service.py文件作为入口类

①静态文件映射

![ba69b26424af49c1ac9c5bd0d4c9124f.png][]

②配置VueRouter路由的反向代理

![cd0835deaa7f45b3a6751978b9ad99c0.png][]

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

![2d9619ff20e5436c9733186a8ead9a47.png][]

**完整代码如下↓↓↓**

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)

#### 四、启动服务 ####

![1c9c9f3ea5044257a2e13b95c5257f43.png][]

浏览器访问：[http://localhost:8000/admin][http_localhost_8000_admin]

![1dbf3158c33a4860a47df5d738390b6a.png][] ![4970739e4bd54730a81923fb8b0d380d.png][]

[SpringBoot_Nginx_Vue3_-CSDN]: https://blog.csdn.net/wenxingchen/article/details/131960140
[b1b74c1ca6734b7fb1790492abca4648.png]: https://img-blog.csdnimg.cn/b1b74c1ca6734b7fb1790492abca4648.png
[83b66d1f2a1548a497244aba799066a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b4f394fcfc8742a9801960062115232c.png
[58c827b7194c4dbfa7a3d2d4bdd4763f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/0babad11ebd346f59a9063f5907aeeb7.png
[ba69b26424af49c1ac9c5bd0d4c9124f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/13b3b1774f5a4ce0a6cd945da3356349.png
[cd0835deaa7f45b3a6751978b9ad99c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/be08e158cad34ec7a090e457c87910db.png
[2d9619ff20e5436c9733186a8ead9a47.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/a6156e7fcac8469898fa4fdf28b00142.png
[1c9c9f3ea5044257a2e13b95c5257f43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c4fd1daa83924ba683982182c86f7625.png
[http_localhost_8000_admin]: http://localhost:8000/admin
[1dbf3158c33a4860a47df5d738390b6a.png]: https://img-blog.csdnimg.cn/1dbf3158c33a4860a47df5d738390b6a.png
[4970739e4bd54730a81923fb8b0d380d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1804f08cf69e404ea41b4e49fdc5c89f.png