python+vue的windows桌面应用实现

要将前端 Vue.js 和后端 Python FastAPI 打包成一个可执行文件,可以使用工具将它们合并到一个单独的可执行文件中。一种常见的方式是使用 PyInstaller 来打包 Python 代码,然后使用 Electron 打包整个应用。

以下是一个基本的步骤:

步骤:

  1. Vue.js 前端:

    • 确保你的 Vue.js 项目已经构建好,并在本地运行。

    • 进入 Vue 项目目录并构建项目:

      arduino 复制代码
      bashCopy code
      cd your-vue-project
      npm install
      npm run build
    • 这将在 dist 目录下生成前端构建文件。

  2. Python FastAPI 后端:

    • 确保你的 FastAPI 项目在本地运行。你可以使用以下命令启动 FastAPI 服务器:

      css 复制代码
      bashCopy code
      cd your-fastapi-project
      uvicorn main:app --reload
    • 确保 FastAPI 服务器的端口与 Vue.js 项目中的 API 请求端口匹配。

  3. 创建 Electron 项目:

    • 在一个新的目录中创建一个 Electron 项目。确保安装了 Node.js 和 npm。

      bash 复制代码
      bashCopy code
      npx create-electron-app your-electron-app
      cd your-electron-app
    • 安装 electron-builder

      css 复制代码
      bashCopy code
      npm install electron-builder --save-dev
  4. 配置 Electron 项目:

    • 修改 package.json 文件,以便 Electron 能够运行 Vue.js 项目和启动 FastAPI 服务器:

      json 复制代码
      jsonCopy code
      {
        "name": "your-electron-app",
        "version": "1.0.0",
        "main": "main.js",
        "scripts": {
          "start": "electron .",
          "build": "electron-builder"
        },
        "build": {
          "appId": "com.example.your-electron-app",
          "productName": "YourElectronApp",
          "files": [
            "dist/**/*",  // Vue.js 构建文件
            "main.js",    // Electron 入口文件
            "your-fastapi-project/**/*"  // FastAPI 代码及其依赖
          ],
          "directories": {
            "output": "dist_electron"
          }
        },
        "dependencies": {
          "electron": "^16.0.0"
        },
        "devDependencies": {
          "electron-builder": "^22.13.1"
        }
      }
    • 修改 main.js 文件:

      javascript 复制代码
      javascriptCopy code
      const { app, BrowserWindow } = require('electron');
      const path = require('path');
      
      function createWindow() {
        const win = new BrowserWindow({
          width: 800,
          height: 600,
          webPreferences: {
            nodeIntegration: true
          }
        });
      
        win.loadFile('dist/index.html');  // 这里指向 Vue.js 构建文件
      
        // 在这里启动 FastAPI 服务器
        const backendProcess = require('child_process').spawn(
          'uvicorn',
          ['your-fastapi-project/main:app', '--reload'],
          { shell: true }
        );
        
        // 监听 Electron 窗口关闭事件,关闭 FastAPI 服务器
        win.on('closed', () => {
          backendProcess.kill();
        });
      }
      
      app.whenReady().then(createWindow);
  5. 构建并打包 Electron 应用:

    • 运行以下命令来构建并打包你的 Electron 应用:

      arduino 复制代码
      bashCopy code
      npm run build
    • 打包后的可执行文件将位于 dist_electron 目录中。

注意事项:

  • 确保 Vue.js 项目和 FastAPI 项目之间没有跨域问题。在生产环境中,你可能需要将它们运行在相同的域名或端口下,以避免浏览器的同源策略。
  • 上述示例仅提供了一个基本的结构,实际应用中可能需要更多的配置和处理。
  • 请确保你在项目的根目录下有相应的项目文件,以及 Python 的依赖项已经被包含在打包中。

这个方法的核心思想是使用 Electron 打包并启动 Vue.js 项目和 FastAPI 服务器。在实际项目中,可能需要更多的调整和优化,具体取决于你的应用的复杂性和需求。

相关推荐
YaHuiLiang5 分钟前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
用户26124583401617 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
冬天的风滚草8 分钟前
Higress开源版 大规模 MCP Server 部署配置方案
后端
雨落倾城夏未凉8 分钟前
4.信号与槽
后端·qt
CAD老兵13 分钟前
前端 Source Map 原理与结构详解
前端
gnip17 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长29 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_29 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe101031 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang31 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor