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

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

pnpm i

pnpm dev

pnpm build

pip install  pywebview

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

#pnpm build:py
# 本地集成合体包
pyinstaller --onefile --add-data "webdist;dist" --icon "webdist/favicon.ico" --windowed main.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"
  },

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

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

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 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")

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()