前言

??本節我們使用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