使用vscode搭建pywebview集成vue项目实践

本文主要是介绍使用vscode搭建pywebview集成vue项目实践,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地...

本节我们使用pythonpywebview和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主入口文件
  • 界面示例

使用vscode搭建pywebview集成vue项目实践

  • 代码结构

使用vscode搭建pywebview集成vue项目实践

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/favico编程n.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="使用vscode搭建pywebview集成vue项目实践",  # 窗口标题
        url=html_file_path,  # 加载的 URL
        min_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 os

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.pathttp://www.chinasem.cnh.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 = None

    def 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="使用vscode搭建pywebview集成vue项目实践",  # 窗口标题
        url=html_file_path,  #js 加载的 URL
        min_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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持China编程(www.chinasem.cn)。

这篇关于使用vscode搭建pywebview集成vue项目实践的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1154901

相关文章

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

虚拟机Centos7安装MySQL数据库实践

《虚拟机Centos7安装MySQL数据库实践》用户分享在虚拟机安装MySQL的全过程及常见问题解决方案,包括处理GPG密钥、修改密码策略、配置远程访问权限及防火墙设置,最终通过关闭防火墙和停止Net... 目录安装mysql数据库下载wget命令下载MySQL安装包安装MySQL安装MySQL服务安装完成

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

SpringBoot整合(ES)ElasticSearch7.8实践

《SpringBoot整合(ES)ElasticSearch7.8实践》本文详细介绍了SpringBoot整合ElasticSearch7.8的教程,涵盖依赖添加、客户端初始化、索引创建与获取、批量插... 目录SpringBoot整合ElasticSearch7.8添加依赖初始化创建SpringBoot项

Zabbix在MySQL性能监控方面的运用及最佳实践记录

《Zabbix在MySQL性能监控方面的运用及最佳实践记录》Zabbix通过自定义脚本和内置模板监控MySQL核心指标(连接、查询、资源、复制),支持自动发现多实例及告警通知,结合可视化仪表盘,可有效... 目录一、核心监控指标及配置1. 关键监控指标示例2. 配置方法二、自动发现与多实例管理1. 实践步骤

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)