Python是怎么将Vue项目打包成桌面端应用程序的?看这篇就够了

在不使用 Electron 的情况下,怎么将前端项目(Vue/React)变成一个桌面端 exe 应用程序呢?使用 pywebview + pyinstaller 就可以实现。本文详细介绍如何从零开始创建一个基于 pywebview 的桌面应用,并最终将其打包成独立的可执行文件(exe)。整个过程包括环境搭建、前端集成、Python 交互实现以及打包部署。

安装

powershell 复制代码
pip install pywebview pyinstaller

项目结构

text 复制代码
my_app/
├── web_dist/      # 前端资源目录(Vue/React打包结果)
│   └── dist/
│       ├── index.html
│       ├── style.css
│       └── app.js
├── main.py        # 主程序
└── topackage.py   # 打包脚本

主程序开发 (main.py)

python 复制代码
import webview
from webview import screens

class Api:
    def __init__(self):
        self.cancel_heavy_stuff_flag = False

if __name__ == '__main__':
    screen = screens[0]
    width = screen.width
    height = screen.height
    api = Api()

    webview.settings = {
        'OPEN_DEVTOOLS_IN_DEBUG': True,
    }

    window = webview.create_window(
        '我的应用', './web_dist/dist/index.html', fullscreen=False, width=int(width), height=int(height))
    webview.start(http_server=False, debug=True)

打包脚本 (topackage.py)

python 复制代码
import os
import shutil
import subprocess
from pathlib import Path


def package_app():
    # 1. 检查必要文件是否存在
    if not Path("main.py").exists():
        raise FileNotFoundError("主程序 main.py 不存在")
    if not Path("web_dist/dist/index.html").exists():
        raise FileNotFoundError("前端资源 web_dist/dist/index.html 不存在")

    # 2. 安装 PyInstaller(如果未安装)
    try:
        import PyInstaller
    except ImportError:
        print("正在安装 PyInstaller...")
        subprocess.check_call(["pip", "install", "pyinstaller"])

    # 3. 清理旧构建文件
    build_dir = Path("build")
    dist_dir = Path("dist")
    spec_file = Path("main.spec")

    for path in [build_dir, dist_dir, spec_file]:
        if path.exists():
            if path.is_dir():
                shutil.rmtree(path)
            else:
                path.unlink()

    # 4. 执行打包命令
    cmd = [
        "pyinstaller",
        "--onefile",
        "--windowed",
        "--add-data", "web_dist/dist;web_dist/dist",  # Windows 用分号分隔
        "--name", "MyWebViewApp",
        "main.py"
    ]

    print("开始打包...")
    subprocess.check_call(cmd)

    # 5. 验证结果
    exe_path = dist_dir / "MyWebViewApp.exe"
    if exe_path.exists():
        print(f"\n 打包成功!可执行文件位置: {exe_path.resolve()}")
        print("注意:目标计算机需要安装 WebView2 Runtime")
    else:
        raise RuntimeError("打包失败,请检查错误信息")


if __name__ == "__main__":
    package_app()

打包与运行

执行打包脚本

powershell 复制代码
python topackage.py

双击MyWebViewApp.exe

下载体验

mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/cloudstorag...

通过 pywebview(轻量级、使用系统原生 WebView 组件、Python 和 JavaScript 无缝交互),可以轻松创建桌面应用。本文详细介绍了从开发到打包的完整流程,提供了可直接使用的代码模板。无论是简单的工具类应用还是复杂的数据可视化项目,这个技术栈都能提供高效可靠的解决方案。

相关推荐
李牧九丶21 小时前
从零学算法1334
前端·算法
大雷神21 小时前
HarmonyOS 横竖屏切换与响应式布局实战指南
python·深度学习·harmonyos
1***s63221 小时前
JavaScript微服务
javascript·微服务·devops
周周爱喝粥呀21 小时前
UI设计原则和Nielsen 的 10 条可用性原则
前端·ui
钅日 勿 XiName21 小时前
一小时速通pytorch之训练分类器(四)(完结)
人工智能·pytorch·python
青瓷程序设计21 小时前
水果识别系统【最新版】Python+TensorFlow+Vue3+Django+人工智能+深度学习+卷积神经网络算法
人工智能·python·深度学习
小云朵爱编程1 天前
Vue项目Iconify的使用以及自定义图标,封装图标选择器
前端·javascript·vue.js
前端大卫1 天前
CSS 属性值 initial、unset 和 revert 的解析
前端
shimh_凉茶1 天前
webpack+vue2打包分析视图插件 webpack-bundle-analyzer
前端·webpack·node.js
P***25391 天前
JavaScript部署
开发语言·前端·javascript