如何在VS Code中使用Live Server或同类工具运行Flask Web应用？

注意：常见的Live Server工具仅支持纯静态HTML/CSS/JS文件预览，无法直接解析Flask的Python后端逻辑，直接用它打开Flask项目的.py文件只会显示源码，无法正常运行路由、接口等后端功能。

方案1：使用Flask原生开发服务器（零额外配置，最常用） #

这是Flask开发阶段最通用的运行方式，启动后直接生成可访问的HTTP地址：

• 先在项目的Python虚拟环境中安装Flask依赖：pip install flask
• 配置Flask项目入口文件（通常命名为app.py），最小可运行示例如下：

from flask import Flask
app = Flask(__name__)

# 定义首页路由
@app.route('/')
def index():
    return "<h1>Flask网站运行成功</h1>"

if __name__ == '__main__':
    # host设为0.0.0.0支持同局域网设备访问，debug=True开启代码修改自动重载
    app.run(host='0.0.0.0', port=5000, debug=True)

• 终端进入项目根目录，执行命令启动服务：python app.py
• 启动完成后，终端会输出可访问的HTTP地址，本机直接打开http://127.0.0.1:5000即可访问，同局域网下其他设备可以通过你电脑的内网IP+5000端口访问。
  补充：Flask自带的服务器仅适合本地开发调试，正式上线部署请替换为Gunicorn、uWSGI等生产级服务。

方案2：搭配Live Server实现前后端分离开发体验 #

如果你的项目是前后端分离架构，Flask仅提供接口服务、前端为独立静态文件，可以搭配Live Server获得前端代码修改即时热刷新的体验：

• 按照方案1先启动Flask后端服务，比如运行在5000端口，专门处理接口逻辑
• 给Flask配置跨域允许，避免前端请求被浏览器拦截：
  1. 安装跨域依赖：pip install flask-cors
  2. 在入口文件中添加跨域初始化代码：

  from flask_cors import CORS
  # 放在app = Flask(__name__)语句后即可
  CORS(app)
  

• 打开前端静态文件所在目录，右键选择「Open with Live Server」启动前端预览服务（默认运行在5500端口）
• 前端代码中所有接口请求指向Flask服务的5000端口即可，此时修改前端代码Live Server会自动刷新页面，修改Flask后端代码开启debug模式也会自动重载，开发体验和纯静态页面使用Live Server一致。

内容的提问来源于stack exchange，提问作者Dao Loc