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

06-01 1809阅读

文章目录

前言
环境准备
项目源码下载
一、项目说明

1 目录结构
2 前端项目
3 后端项目

获取python安装包(选择对应版本及系统)
三、调试与生成可执行文件

1 本地调试
2 打包应用
四、核心代码说明

1、package.json
2、vite.config.ts设置
3、main.py后端入口文件说明

参考文档

前言

本节我们使用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,  # 加载的 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.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 = 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="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)
if __name__ == "__main__":
    create_window()

参考文档

pywebview文档
程序源码：PywebviewVue

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

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

文章目录

前言

环境准备

项目源码下载

一、项目说明

1 目录结构

2 前端项目

3 后端项目

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

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

1 本地调试

2 打包应用

四、核心代码说明

1、package.json

2、vite.config.ts设置

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

参考文档

相关阅读

目录[+]