使用vscode搭建pywebview集成vue项目示例

前言

  本节我们使用pywebview和vue3搭建一个简单的桌面应用示例。

环境准备

• 1、工具：VSCode
• 2、环境：python、pywebview、vue3+typesrcipt+vite
• 3、前端UI：Element Plus

项目源码下载

• Gitee源码地址：https://gitee.com/lqh4188/pywebview-vue

一、项目说明

1 目录结构

├── dist #python构建后的可执行程序目录 
├── python #后台python文件
├── web #前端vue文件
├── webdist #前端构建后的文件目录
├── README.md #项目说明
└── main.py Python主入口文件

• 界面示例
  
• 代码结构
  

2 前端项目

前端使用vue3+typescript+vite+elment plus

• 依赖安装

pnpm i

• 运行

pnpm dev

• 构建

pnpm build

3 后端项目

后端使用python提供接口服务

获取python安装包(选择对应版本及系统)

• 下载地址： https://www.python.org/downloads/
• 查看本地版本号：python -V
• 安装pywebview

pip install  pywebview

• 运行应用

#使用pnpm支持
#pnpm dev:py
#使用python命令运行
python main.py

三、调试与生成可执行文件

1 本地调试

• 启动前端项目：pnpm dev
• 启动pywebview：pnpm dev:py 或者直接使用python命令 python main.py

2 打包应用

• 首页进行前端项目打包：pnpm build
• 构建python可执行文件：pnpm build:py，或直接使用pyinstaller命令生成

#pnpm build:py
# 本地集成合体包
pyinstaller --onefile --add-data "webdist;dist" --icon "webdist/favicon.ico" --windowed main.py

参数说明:

• –add-data “webdist;dist”:将前端静态资源添加到程序目录
• –icon “webdist/favicon.ico”：添加自定义图标
• 其他参数参考pyinstaller参数说明

四、核心代码说明

代码参考：PywebviewVue

1、package.json

封装了前后端项目开发、构建的快捷命令：

• 前端项目启动：pnpm dev
• 前端项目构建：pnpm build
• 启动后端项目：pnpm dev:py,其实运行的是python main.py
• 打包成exe可执行文件：pnpm build:py,其实执行的是pyinstaller --onefile --add-data "webdist;dist" --icon "webdist/favicon.ico" --windowed main.py

  "scripts": {"dev": "vite","build": "vite build","dev:py": "python main.py","build:py": "pyinstaller --onefile --windowed --icon \"webdist/favicon.ico\" --add-data \"webdist;dist\" main.py"},

2、vite.config.ts设置

由于前端项目默认构建地址为当前目录下的dist文件，而pywebview也是基于主文件的当前目录，默认构建后的文件输出为dits目录，所以为了构建文件，把前端构建文件的输出目录调整为和web、python平级的webdist目录

• vite.config.ts

build:{// 构建输出目录，相对于 root 目录outDir: '../webdist',
}

• tsconfig.json
  设置前端项目的入口文件和

{"compilerOptions": {"target": "ES5", // 目标js的版本"baseUrl": ".","outDir": "./webdist","rootDir": "./web/src","paths": {"@/*": ["web/src/*"]},},
}

3、main.py后端入口文件说明

**注意事项**

• python 与 vue的交互
  通过pywebview提供的js_api实现vue与python的接口交互，这里需要注意的是api与window对象的挂载

def create_window():api = jsApi.Api()  # 实例化 Api 类window = webview.create_window(title="pywebview vue",  # 窗口标题url=html_file_path,  # 加载的 URLmin_size=(1000, 600),  # 最小尺寸       js_api=api,  # 将上面实例化后的 Api 对象传给前端 js 调用       )# --划重点--务必记得需要将上面创建的 window 对象再通过函数传给实例化后的 api 对象api.set_window(window)webview.start(localization=chinese)

• 开发环境与构建环境的目录设置
  为方便调试，开发环境要设置的前端本地地址，而打包时可执行的exe文件要目录为dist目录，所以要区分根路径，否则运行main.py时，会报资源找不到

if getattr(sys, "frozen", False):# 如果是打包后的可执行文件base_path = sys._MEIPASS# 定义 Vue 构建后的 HTML 文件路径html_file_path = os.path.join(base_path, "dist", "index.html")
else:# 如果是开发环境base_path = os.path.dirname(os.path.abspath(__file__))# 定义 Vue 构建后的 HTML 文件路径html_file_path = os.path.join(base_path, "http://localhost:5173")

• 完整的main.py代码如下：

import webview
import sys
import osif getattr(sys, "frozen", False):# 如果是打包后的可执行文件base_path = sys._MEIPASS# 定义 Vue 构建后的 HTML 文件路径html_file_path = os.path.join(base_path, "dist", "index.html")
else:# 如果是开发环境base_path = os.path.dirname(os.path.abspath(__file__))# 定义 Vue 构建后的 HTML 文件路径html_file_path = os.path.join(base_path, "http://localhost:5173")# 定义测试对象
def get_device_info():return {"version": "V1.0.0", "description": "pywebview集成Vue示例", "environment": "pywebview+vue+ts","others":""}#定义与前端交互的api   
class Api:def __init__(self) -> None:self._window = Nonedef set_window(self, window):self._window = window# 获取消息    def getMessage(self):return get_device_info()# 接收前端提交的数据def saveMessage(self, data):return f"python接收到数据: {data}"# 配置 pywebview 关闭提示的中文翻译
chinese = {"global.quitConfirmation": "确定关闭?",
}def create_window():api = jsApi.Api()  # 实例化 Api 类window = webview.create_window(title="pywebview vue",  # 窗口标题url=html_file_path,  # 加载的 URLmin_size=(1000, 600),  # 最小尺寸       js_api=api,  # 将上面实例化后的 Api 对象传给前端 js 调用       )# --划重点--务必记得需要将上面创建的 window 对象再通过函数传给实例化后的 api 对象api.set_window(window)webview.start(localization=chinese)if __name__ == "__main__":create_window()

参考文档

• pywebview文档
• 程序源码：PywebviewVue