使用vscode搭建pywebview集成vue項(xiàng)目實(shí)踐

更新時(shí)間：2025年06月04日 11:08:58 作者：深海藍(lán)山的博客

這篇文章主要介紹了使用vscode搭建pywebview集成vue項(xiàng)目實(shí)踐,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

環(huán)境準(zhǔn)備

1、工具：VSCode
2、環(huán)境：python、pywebview、vue3+typesrcipt+vite
3、前端UI：Element Plus

項(xiàng)目源碼下載

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

項(xiàng)目說(shuō)明

1 目錄結(jié)構(gòu)

├── dist #python構(gòu)建后的可執(zhí)行程序目錄 
├── python #后臺(tái)python文件
├── web #前端vue文件
├── webdist #前端構(gòu)建后的文件目錄
├── README.md #項(xiàng)目說(shuō)明
└── main.py Python主入口文件

界面示例

代碼結(jié)構(gòu)

2 前端項(xiàng)目

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

依賴安裝

pnpm i

運(yùn)行

pnpm dev

構(gòu)建

pnpm build

3 后端項(xiàng)目

后端使用python提供接口服務(wù)

獲取python安裝包(選擇對(duì)應(yīng)版本及系統(tǒng))

下載地址： https://www.python.org/downloads/
查看本地版本號(hào)：python -V
安裝pywebview

pip install  pywebview

運(yùn)行應(yīng)用

#使用pnpm支持
#pnpm dev:py
#使用python命令運(yùn)行
python main.py

調(diào)試與生成可執(zhí)行文件

1 本地調(diào)試

啟動(dòng)前端項(xiàng)目：pnpm dev
啟動(dòng)pywebview：pnpm dev:py 或者直接使用python命令 python main.py

2 打包應(yīng)用

首頁(yè)進(jìn)行前端項(xiàng)目打包：pnpm build
構(gòu)建python可執(zhí)行文件：pnpm build:py，或直接使用pyinstaller命令生成

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

參數(shù)說(shuō)明：

–add-data “webdist;dist”:將前端靜態(tài)資源添加到程序目錄
–icon “webdist/favicon.ico”：添加自定義圖標(biāo)
其他參數(shù)參考pyinstaller參數(shù)說(shuō)明

核心代碼說(shuō)明

代碼參考：PywebviewVue

1、package.json

封裝了前后端項(xiàng)目開(kāi)發(fā)、構(gòu)建的快捷命令：

前端項(xiàng)目啟動(dòng)：pnpm dev
前端項(xiàng)目構(gòu)建：pnpm build
啟動(dòng)后端項(xiàng)目：pnpm dev:py,其實(shí)運(yùn)行的是python main.py
打包成exe可執(zhí)行文件：pnpm build:py,其實(shí)執(zhí)行的是

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設(shè)置

由于前端項(xiàng)目默認(rèn)構(gòu)建地址為當(dāng)前目錄下的dist文件，而pywebview也是基于主文件的當(dāng)前目錄，默認(rèn)構(gòu)建后的文件輸出為dits目錄，所以為了構(gòu)建文件，把前端構(gòu)建文件的輸出目錄調(diào)整為和web、python平級(jí)的webdist目錄

vite.config.ts

build:{
    // 構(gòu)建輸出目錄，相對(duì)于 root 目錄
    outDir: '../webdist',
}

tsconfig.json

設(shè)置前端項(xiàng)目的入口文件和

{
  "compilerOptions": {
    "target": "ES5", // 目標(biāo)js的版本
    "baseUrl": ".",
    "outDir": "./webdist",
    "rootDir": "./web/src",
    "paths": {
      "@/*": ["web/src/*"]
    },
  },
}

3、main.py后端入口文件說(shuō)明

**注意事項(xiàng)**

python 與 vue的交互

通過(guò)pywebview提供的js_api實(shí)現(xiàn)vue與python的接口交互，這里需要注意的是api與window對(duì)象的掛載

def create_window():
    api = jsApi.Api()  # 實(shí)例化 Api 類
    window = webview.create_window(
        title="pywebview vue",  # 窗口標(biāo)題
        url=html_file_path,  # 加載的 URL
        min_size=(1000, 600),  # 最小尺寸       
        js_api=api,  # 將上面實(shí)例化后的 Api 對(duì)象傳給前端 js 調(diào)用       
    )
    # --劃重點(diǎn)--務(wù)必記得需要將上面創(chuàng)建的 window 對(duì)象再通過(guò)函數(shù)傳給實(shí)例化后的 api 對(duì)象
    api.set_window(window)
    webview.start(localization=chinese)

開(kāi)發(fā)環(huán)境與構(gòu)建環(huán)境的目錄設(shè)置

為方便調(diào)試，開(kāi)發(fā)環(huán)境要設(shè)置的前端本地地址，而打包時(shí)可執(zhí)行的exe文件要目錄為dist目錄，所以要區(qū)分根路徑，否則運(yùn)行main.py時(shí)，會(huì)報(bào)資源找不到

if getattr(sys, "frozen", False):
    # 如果是打包后的可執(zhí)行文件
    base_path = sys._MEIPASS
    # 定義 Vue 構(gòu)建后的 HTML 文件路徑
    html_file_path = os.path.join(base_path, "dist", "index.html")
else:
    # 如果是開(kāi)發(fā)環(huán)境
    base_path = os.path.dirname(os.path.abspath(__file__))
    # 定義 Vue 構(gòu)建后的 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):
    # 如果是打包后的可執(zhí)行文件
    base_path = sys._MEIPASS
    # 定義 Vue 構(gòu)建后的 HTML 文件路徑
    html_file_path = os.path.join(base_path, "dist", "index.html")
else:
    # 如果是開(kāi)發(fā)環(huán)境
    base_path = os.path.dirname(os.path.abspath(__file__))
    # 定義 Vue 構(gòu)建后的 HTML 文件路徑
    html_file_path = os.path.join(base_path, "http://localhost:5173")

# 定義測(cè)試對(duì)象
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()
    # 接收前端提交的數(shù)據(jù)
    def saveMessage(self, data):
        return f"python接收到數(shù)據(jù): {data}"
        
# 配置 pywebview 關(guān)閉提示的中文翻譯
chinese = {
    "global.quitConfirmation": "確定關(guān)閉?",
}

def create_window():
    api = jsApi.Api()  # 實(shí)例化 Api 類
    window = webview.create_window(
        title="pywebview vue",  # 窗口標(biāo)題
        url=html_file_path,  # 加載的 URL
        min_size=(1000, 600),  # 最小尺寸       
        js_api=api,  # 將上面實(shí)例化后的 Api 對(duì)象傳給前端 js 調(diào)用       
    )
    # --劃重點(diǎn)--務(wù)必記得需要將上面創(chuàng)建的 window 對(duì)象再通過(guò)函數(shù)傳給實(shí)例化后的 api 對(duì)象
    api.set_window(window)
    webview.start(localization=chinese)


if __name__ == "__main__":
    create_window()

參考文檔：