flask和vue前后端分离项目部署的示例代码

下面我将为你详细讲解Flask和Vue前后端分离项目部署的攻略，分为以下几个步骤：

1. 开发前的准备工作

在开始开发前，我们需要准备好以下工具和环境：

1. Python环境。推荐安装Python 3.6以上的版本。
2. Node.js环境。推荐安装8.11以上的版本。
3. Vue CLI。可使用npm install -g @vue/cli命令进行安装。
4. MySQL数据库。可根据具体操作系统下载安装包并进行安装。
5. 代码编辑器。 推荐使用VS Code等编辑器。

2. 创建Flask后端项目

可以使用以下命令创建一个基于Flask的后端项目：

# 创建Flask项目
$ mkdir flask-project
$ cd flask-project
$ python3 -m venv venv
$ source venv/bin/activate

# 安装Flask
$ pip install flask

创建app.py文件，并在其中写入以下代码：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/hello')
def hello():
    return jsonify({'message': 'Hello, Flask!'})

if __name__ == '__main__':
    app.run()

运行以下命令启动Flask应用（推荐使用Gunicorn或uWSGI等应用服务器进行部署）：

$ FLASK_APP=app.py flask run

此时，访问http://localhost:5000/api/hello即可看到返回的JSON数据。

3. 创建Vue前端项目

使用以下命令创建一个基于Vue的前端项目：

# 创建Vue项目
$ vue create vue-project

安装完毕后，可以使用以下命令进行本地测试：

$ cd vue-project
$ npm run serve

此时，访问http://localhost:8080即可看到Vue的欢迎页面。

4. 配置前后端联调

在Vue项目的src目录下，创建一个config.js文件，并在其中写入以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

这段代码的作用是将所有以/api开头的请求代理到Flask后端的5000端口。

此时，运行以下命令启动Vue应用：

$ npm run serve

运行以下命令启动Flask应用：

$ FLASK_APP=app.py flask run --port=5000

此时，访问http://localhost:8080/api/hello即可看到前端Vue与后端Flask的联调效果。

5. 项目部署

在项目完成开发后，我们需要将其部署到线上服务器中以提供服务。以下是一个基于Nginx和Gunicorn的部署示例：

首先，安装Nginx和Gunicorn：

$ sudo apt-get update
$ sudo apt-get install nginx gunicorn

编写Gunicorn启动脚本文件gunicorn_start.sh：

#!/bin/bash
source /path/to/venv/bin/activate
cd /path/to/project-dir
export FLASK_APP=app.py
exec gunicorn app:app -w 4 -b 127.0.0.1:8000

将Nginx的配置文件/etc/nginx/sites-available/default更改为以下内容：

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /static {
        alias /path/to/static/files;
    }
}

重启Nginx服务：

$ sudo service nginx restart

执行以下命令启动Gunicorn应用：

$ sh gunicorn_start.sh

至此，我们的Flask和Vue前后端分离项目已经部署完成。

示例说明

1. 在Flask项目中，我们只编写了一个简单的API接口，以此来验证后端项目是否正常运行。在实际开发中，我们需要编写更多的接口来返回数据或处理函数调用。

2. 在Vue项目中，我们通过配置devServer实现了前后端代码的联调。在开发过程中，可以使用这种方式将前端代码和后端代码同时运行在本地，以便进行调试和开发。

总结：

以上就是Flask和Vue前后端分离项目部署的完整攻略。通过以上步骤的学习，我们可以了解到如何去搭建Vue的前端框架，以及如何去构建后端Flask框架，同时也能掌握前后端协同开发的方式，帮助我们快速的开发出一款优秀的前后端分离项目，提供更好的服务。