如何将React+Flask（含SQLite）打包为Windows可执行文件？

一、用Electron整合Flask与React（单EXE） #

核心思路是先把Flask后端打包成无Python依赖的独立exe，再在Electron的主进程里启动这个后端，同时加载React前端，最后把整个Electron项目打包成单EXE。

步骤1：打包Flask后端为独立exe #

• 先确认你的Flask项目能正常运行，SQLite数据库路径要用相对路径（避免打包后找不到文件）。
• 安装PyInstaller：pip install pyinstaller
• 执行打包命令（根据项目结构调整参数）：

  pyinstaller --onefile --add-data "db.sqlite;." --add-data "templates;templates" --add-data "static;static" app.py
  

  说明：--onefile生成单文件exe；--add-data用于打包静态资源（数据库、模板、静态文件等），格式为源路径;目标路径。
• 打包完成后，dist目录会生成一个独立exe，无需Python环境即可运行。

步骤2：在Electron的main.js中启动后端并加载React #

• 先打包React项目为静态文件：npm run build，得到build目录。
• 将Flask exe放到Electron项目的resources目录（无则新建）。
• 修改Electron的main.js，实现启动后端+加载前端的逻辑：

  const { app, BrowserWindow } = require('electron');
  const path = require('path');
  const { spawn } = require('child_process');
  
  let backendProcess;
  let mainWindow;
  
  function createWindow() {
    mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        contextIsolation: false,
        nodeIntegration: true
      }
    });
  
    // 启动Flask后端exe
    const backendExePath = path.join(__dirname, 'resources', 'app.exe'); // 替换为你的后端exe文件名
    backendProcess = spawn(backendExePath);
  
    // 可选：监听后端输出用于调试
    backendProcess.stdout.on('data', (data) => {
      console.log(`后端输出: ${data}`);
    });
    backendProcess.stderr.on('data', (data) => {
      console.error(`后端错误: ${data}`);
    });
  
    // 加载React打包后的静态页面
    mainWindow.loadFile(path.join(__dirname, '../build', 'index.html'));
  
    // 关闭窗口时终止后端进程
    mainWindow.on('closed', () => {
      backendProcess.kill();
      mainWindow = null;
    });
  }
  
  app.on('ready', createWindow);
  
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      backendProcess?.kill();
      app.quit();
    }
  });
  
  app.on('activate', () => {
    if (mainWindow === null) {
      createWindow();
    }
  });
  

步骤3：打包Electron为单EXE #

• 安装electron-builder：npm install electron-builder --save-dev
• 在package.json中添加build配置：

  "build": {
    "appId": "com.yourapp.id",
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico" // 可选：添加应用图标
    },
    "files": [
      "build/**/*",
      "main.js",
      "resources/**/*"
    ]
  }
  

• 执行打包命令：npm run dist，生成的EXE会包含所有组件，用户双击即可同时启动前端和后端。

二、其他替代方案 #

1. PyWebView（更轻量，无需Electron） #

PyWebView是Python库，直接调用系统原生WebView展示前端，同时内嵌Flask服务，打包后为单文件exe，体积远小于Electron。

• 步骤：
  1. 打包React为静态文件：npm run build。
  2. 修改Flask入口文件，用PyWebView启动WebView并加载Flask服务：

     from flask import Flask, render_template
     import webview
     import threading
     
     app = Flask(__name__, static_folder='../build/static', template_folder='../build')
     
     @app.route('/')
     def index():
       return render_template('index.html')
     
     def run_flask():
       app.run(port=5000, debug=False)
     
     if __name__ == '__main__':
       # 启动Flask后台线程
       threading.Thread(target=run_flask).start()
       # 打开WebView窗口加载Flask页面
       webview.create_window("你的应用名称", "http://localhost:5000")
       webview.start()
     

  3. 用PyInstaller打包：pyinstaller --onefile --add-data "../build;build" app.py，生成的exe为独立运行的单文件。

2. Tauri（轻量替代Electron） #

Tauri是基于Rust的桌面框架，体积比Electron小很多。可将Flask打包成exe后，在Tauri的Rust后端中启动该进程，同时加载React前端。适合对安装包体积有要求的场景，但需要了解基础Rust知识。

内容的提问来源于stack exchange，提问作者Rushabh Panbude