Vue+FastAPI 项目宝塔Linux部署指南

一、前置准备

腾讯云轻量应用服务器已安装宝塔 Linux 面板；
本地完整的 Vue + FastAPI 前后端分离项目代码；
**Nginx，**这是前端部署和反向代理的核心。

二、后端 FastAPI 部署（宝塔 Python 项目）

2.1 本地后端

1. 在 backend 文件夹根目录（和 main.py 同级），在requirements.txt，写入项目依赖：

python 复制代码

fastapi
uvicorn[standard]

# 你的其他依赖（如 pandas、numpy 等）

2. 配置跨域中间件在 main.py 中添加 CORS 配置，确保前端能正常请求接口：

python 复制代码

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(
    title="Math网站",
    version="0.2.0",
    description="网站",
)

# 新手阶段直接允许所有来源，后续上线可改为具体域名
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 接口代码示例
@app.get("/")
def read_root():
    return {"message": "Hello World"}

@app.get("/api/health")
def health_check():
    return {"status": "healthy"}

2.2 宝塔创建并配置 Python 项目

2.3 安装依赖并启动

项目创建后，点击右侧【环境管理】
选择【从 requirements.txt 安装】，选中项目里的 requirements.txt
安装完成后，回到项目列表，点击【重启】
查看【项目日志】，出现 INFO: Uvicorn running on http://0.0.0.0:8090 即为启动成功

2.4 后端外网验证与端口放行

验证：本地浏览器访问 http://你的服务器公网IP:8090/docs，能看到 Swagger 接口文档即为成功
端口放行（必做） ：
- 宝塔内：左侧【安全】→ 防火墙，放行 8090
- 腾讯云控制台：云服务器 → 安全组 → 添加入站规则（自定义 TCP，端口 8090，授权对象 0.0.0.0/0）

三、前端 Vue 部署（宝塔 HTML 项目）

3.1 本地前端代码预处理

**1. 配置 vite.config.ts**确保配置正确，避免打包后资源路径错误：

python 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode }) => ({
  base: mode === 'production' ? '/' : '/',
  plugins: [vue()],
  server: {
    proxy: {
      // 开发时代理，打包后失效，部署后靠宝塔反向代理
      '/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
      },
    },
  },
}))

2. 配置生产环境接口地址 在 Vue 项目根目录新建 / 打开 .env.production，写入：

python 复制代码

VITE_API_BASE=http://你的服务器公网IP:8090

3.2 本地打包与验证

在 Vue 项目根目录 （包含 package.json 的文件夹）运行：

python 复制代码

npm run build

生成一个 dist 文件夹。

3.3 宝塔创建 HTML 项目

宝塔左侧【网站】→ 切换到【HTML 项目】→ 点击【添加站点】

3.4 修改端口并上传文件

站点创建后，点击右侧【设置】，将默认端口 80 改为你想要的端口（如 8505），保存

2. 正确上传文件：

打开本地 dist 文件夹 ，点击进去，全选里面的所有文件（index.html、assets 等） ，不要直接选 dist 文件夹本身------压缩成 zip 包------上传到宝塔项目根目录，解压。

====》》打开项目的根目录，第一眼必须直接看到 index.html

放行端口 ：去宝塔【安全】和腾讯云安全组，放行 8505 端口（步骤同后端）

四、部署完成后的最终访问地址

完成以上所有部署步骤后，你的项目就正式上线了，直接复制对应地址到浏览器即可访问，核心规则：访问前端页面用前端端口，访问后端接口用后端端口。

标准访问地址对照表

访问目标	对应端口	通用访问格式	核心用途
Vue 前端项目主页面	前端端口（本教程示例：8505）	`http://你的服务器公网IP:前端端口号`	项目正式访问地址，发给其他人即可直接打开你的网站
FastAPI 后端接口文档	后端端口（本教程示例：8090）	`http://你的服务器公网IP:后端端口号/docs`	开发测试专用，可直接在页面测试所有接口、查看接口参数与返回值

完成以上步骤，你的 Vue + FastAPI 项目就完整部署上线啦！！！