Flask+Vue3+宝塔面板部署前后端【全网独家！！！】

目录

前言

环境需求

本地电脑部署

创建一个空白Vue3项目

创建一个空白Flask项目

前后端信息传送

前端部署

后端部署

服务器部署

下载安装宝塔面板

修改前端文件【重要！！！】

上传前后端文件

部署后端Flask

安装并配置Nginx(部署前端)

配置安全组+防火墙

配置完成

前言

最近博主刚学完Vue3，迫不及待的需要敲一个项目，前端使用Vue3开发，后端由于博主没有学过Java，于是想到使用“Flask”作为后端，关于搭建在全网搜索也没有见一个讲明白的，为此博主再成功搭建完成后，特地记录此博客，方便大家学习

在这里我们分两块讲解：“本地电脑前后端部署”与“服务器前后端部署”，道理基本一致，但些许细节不同

阅读本博客，已默认您具备以下能力：

1. 了解Vue3和Flask项目的构造搭建
2. 了解宝塔面板的安装与使用

环境需求

1. 宝塔：9.0稳定版
2. Flask：最新版本即可
3. pycharm：社区版
4. Vue3：最新版本即可
5. Vite：最新版本即可
6. Nginx：1.24.0

本地电脑部署

创建一个空白Vue3项目

使用“npm create vue@latest”(推荐使用cnpm代替)创建一个空白Vue3项目：

创建项目后，在命令行执行上面三条命令：

1. cd studuVue
2. npm install
3. npm run dev

同理，可以使用cnpm代替，输入完命令后开始修改文件：

1. 将“/src/components”文件夹内所有内容清空
2. 修改App.vue文件如下：

   <script setup>
   
   function handleClick() {
     console.log('点击测试')
   }
   
   </script>
   
   <template>
   <button @click="handleClick">点击测试</button>
   </template>

3. 修改main.js文件如下：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

 现在页面的样子如下，当点击按钮后，控制台会打印信息：

接下来安装axios，用于前后端传输信息：

在终端中输入下列命令，安装axios：

npm install axios --save

创建一个空白Flask项目

在Pycharm中点击“新建项目”，创建一个项目：

在项目终端中输入“pip install flask”安装flask(这里需要进入项目的虚拟环境)：

‘

修改main.py文件：

from flask import Flask,request
app = Flask(__name__)

@app.route("/api")
def index():
    return '我是后端的信息'


if __name__ == '__main__':
    app.run(debug=True,port=5000)

右键运行main.py文件，效果如下：

下图表示Flask项目已经成功在端口5000上开放

打开这个地址，内容如下：

至此我们已经成功搭建好前端和后端，下面只需要模拟前后端信息传送和分别部署前后端即可！！！

前后端信息传送

修改App.vue文件如下：

<script setup>
import axios from 'axios'
function handleClick() {
  // 发送axios请求,地址是本地主机在5000端口开放的Flask项目
  axios.get('http://127.0.0.1:5000/api').then((res) => {
    console.log("接收到的信息为:",res.data);
  })
}

</script>

<template>
<button @click="handleClick">点击测试</button>
</template>

修改main.js文件如下：

from flask import Flask,request
app = Flask(__name__)

@app.route('/')
def index():
    return 'hello world'

@app.route("/api")
def api():
    return '我是后端的信息'


if __name__ == '__main__':
    app.run(debug=True,port=5000)

此时点击按钮，效果如下：

意思是连接被拒绝，由于没有配置同源策略(同源策略是什么在这里不做解答)，有一个非常简单的解决办法：

在Python项目终端输入：“pip install flask_cors”安装Flask框架的一个同源配置库

随后再次修改main.py文件如下：

from flask import Flask,request
from flask_cors import CORS
app = Flask(__name__)
#添加CORS同源规则
CORS(app)

@app.route('/')
def index():
    return 'hello world'

@app.route("/api")
def api():
    return '我是后端的信息'


if __name__ == '__main__':
    app.run(debug=True,port=5000)

再次点击按钮，前端已经成功能接收到后端发送的信息：

后端 -> 前端传送数据解决了，我们再尝试一下 前端 -> 后端传送数据：

修改App.vue文件如下：

<script setup>
import axios from 'axios'
function getData() {
  // 发送axios请求,地址是本地主机在5000端口开放的Flask项目
  axios.get('http://127.0.0.1:5000/api/getdata').then((res) => {
    console.log("接收到的信息为:",res.data);
  })
}

function postData() {
  // 发送axios请求,地址是本地主机在5000端口开放的Flask项目
  axios.post('http://127.0.0.1:5000/api/postdata',{name:'张三',age:20}).then((res) => {    
    console.log(res.data);
  })
}

</script>

<template>
<button @click="getData">接收数据</button>
<button @click="postData">传送数据</button>
</template>

修改main.py文件如下：

from flask import Flask,request
from flask_cors import CORS
app = Flask(__name__)
#添加CORS同源规则
CORS(app)

@app.route('/')
def index():
    return 'hello world'

@app.route("/api/getdata")
def getData():
    return '我是后端的信息'

@app.route("/api/postdata",methods={'POST'})
def postData():
    data = request.data
    if data:
        #需要编码为utf-8正常显示中文
        data = data.decode('utf-8')
        print(data)
        return '正确'
    else:
        return '错误'


if __name__ == '__main__':
    app.run(debug=True,port=5000)

点击按钮，发现控制台可以正常打印post动作的回调：

而在后端，我们可以看到正常打印前端传送的数据：

前端部署

打开前端项目的终端，输入：“npm run build”打包前端项目：

打包完成后，会在项目文件夹中出现“dist”文件夹，这个就是我们的打包文件：

文件夹中有三个项目：

1. assets：项目依赖的CSS文件和JS文件
2. index.html：项目依赖页面(渲染页面)
3. favicon.ico：Vue自带icon图标，无视即可

打开index.html会发现界面一片空白，随后打开控制台，发现一片报错：

意思是找不到项目所依赖的CSS和JS文件，造成这个问题的原因如下：

• npm run build默认打包后的文件需要运行在HTTP服务器上

解决办法：

在当前文件夹内打开终端，输入：“npm install http-server”(安装本地服务器插件)

(当然你也可以输入npm install http-server -g将本地服务器插件安装在全局环境下，这样任何时候都可以使用本地服务器)

随后在终端输入：http-server

打开“Available on:”下三个地址中的任意一个(上图红色框框内地址！！！)

页面成功显示！！！！

并且点击按钮，可以正常与后端通信

至此，我们在本地电脑部署前端已经完成！！

后端部署

至于本地电脑后端部署，你在Pycharm中运行的main.py文件就已经相当于部署了。。。

(在本地电脑使用命令框运行Flask项目与Pycharm中运行并无根本区别。。。)

服务器部署

下载安装宝塔面板

在你的服务器中下载并安装宝塔面板，这里提供一个2024.11.20仍可以使用的Ubuntu的安装命令：

wget -O install.sh https://download.bt.cn/install/install_lts.sh && sudo bash install.sh ed8484bec

更多的安装命令查看官网：宝塔面板下载，免费全能的服务器运维软件

安装完成后，根据提示给出的用户名和密码用本地电脑登录到宝塔面板即可

修改前端文件【重要！！！】

下面我们需要修改App.vue中的文件，内容如下：

<script setup>
import axios from 'axios'
function getData() {
  // xxx.xxx.xxx.xxx替换成服务器的公网IP
  // ???替换成Vue前端的端口
  axios.get('http://xxx.xxx.xxx.xxx:???/api/getdata').then((res) => {
    console.log("接收到的信息为:",res.data);
  })
}

function postData() {
  // xxx.xxx.xxx.xxx替换成服务器的公网IP
  // ???替换成Vue前端的端口
  axios.post('http://xxx.xxx.xxx.xxx:???/api/postdata',{name:'张三',age:20}).then((res) => {    
    console.log(res.data);
  })
}

</script>

<template>
<button @click="getData">接收数据</button>
<button @click="postData">传送数据</button>
</template>

注意：“不同于在本地电脑部署，在服务器部署时，需要将上述的xxx.xxx.xxx.xxx修改为服务器的公网IP” 

最后，不要忘记重新执行打包命令：“npm run build”

上传前后端文件

在宝塔面板左侧选择“文件”栏目，随便选择一个路径（记住你的路径！！！），上传前后端文件：

在这里我的路径是：“/www/wwwroot”

上传后端文件会由于文件数目过多无法传送，可以将其压缩，待上传后再右键解压即可

部署后端Flask

在宝塔面板左侧选择“网站”栏目，点击后找到Python项目：

安装一个Python版本，版本号大于3.9即可

安装完成后，点击添加Python项目：

随后设置如下内容：

• 项目名称：在宝塔面板内显示的名字
• 项目端口：后端Flask的端口，自己设置(注意：由于我们的后端是在内网条件下运行，这个端口也是内网端口，不同于前端的外网端口)
• 项目路径：选择你的项目路径

添加完成后，我们的Flask项目就已经成功部署：

接下来我们还需要在服务器上安装Flask项目需要的“包 

点击右侧的“终端”，进入终端，输入：“pip install flask”和”pip install flask_cors“

安装并配置Nginx(部署前端)

在宝塔面板左侧找到“软件商店”栏目，找到Nginx安装，版本选择1.24.0即可：

安装完成后，找到左侧的“配置修改”栏目，开始配置Nginx，修改如下：

        location ~ ^/api/
        {
          proxy_pass http://xxx.xxx.xxx.xxx:???$request_uri;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

• listen：Nginx监听的端口
• server_name：Nginx监听的IP地址
• root：index.html文件路径
• location ~ ^/api/：通配符匹配URL规定转发规则(这个意思是，凡是监听到xxx.xxx.xxx.xxx:8888/api/xxx/xxx路径的请求，都转发到下面xxx.xxx.xx.xxx:5000路径上，这个路径恰好是我们本地Flask后端的监听路径相当于转发给后端)
• $request_url：获取除IP以外的所有参数(xxx.xxx.xxx.xxx:5000/api/getdata获取到的参数就为/api/getdata)
• $url：获取除IP以外的所有参数+根文件(xxx.xxx.xxx.xxx:5000/dist获取到的参数就为/dist/index.html)

配置完成后，重启Nginx服务

配置安全组+防火墙

如果租用的服务器有“安全组”，需要去控制中心将安全组策略添加端口号为“前端端口”和“后端端口”(在我的例子中是8888和5000)的通行许可

打开宝塔面板，找到左侧“安全”栏目，点击“添加端口规则”，添加端口号为“前端端口”和“后端端口”的通行许可(在我的例子中是8888和5000)

配置完成

至此，我们已成功在服务器部署前端和后端，那么在网页中输入：“服务器IP:前端端口”形式的URL，尝试打开自己部署的前后端吧！！

结尾

如果本文对您有所帮助，烦请点一个小小的关注吧！！！

如果本文对您有所帮助，烦请点一个小小的关注吧！！！

如果本文对您有所帮助，烦请点一个小小的关注吧！！！