腳本之家服務器常用軟件

快捷導航

使用vscode搭建pywebview集成vue項目實踐

更新時間：2025年06月04日 11:08:58 作者：深海藍山的博客

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

環(huán)境準備

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

項目源碼下載

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

項目說明

1 目錄結構

├── dist #python構建后的可執(zhí)行程序目錄 
├── 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安裝包(選擇對應版本及系統(tǒng))

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

pip install  pywebview

運行應用

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

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

1 本地調試

啟動前端項目：pnpm dev
啟動pywebview：pnpm dev:py 或者直接使用python命令 python main.py

2 打包應用

首頁進行前端項目打包：pnpm build
構建python可執(zhí)行文件：pnpm build:py，或直接使用pyinstaller命令生成

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

參數(shù)說明：

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

核心代碼說明

代碼參考：PywebviewVue

1、package.json

封裝了前后端項目開發(fā)、構建的快捷命令：

前端項目啟動：pnpm dev
前端項目構建：pnpm build
啟動后端項目：pnpm dev:py,其實運行的是python main.py
打包成exe可執(zhí)行文件：pnpm build:py,其實執(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設置

由于前端項目默認構建地址為當前目錄下的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實現(xiàn)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 調用       
    )
    # --劃重點--務必記得需要將上面創(chuàng)建的 window 對象再通過函數(shù)傳給實例化后的 api 對象
    api.set_window(window)
    webview.start(localization=chinese)

開發(fā)環(huán)境與構建環(huán)境的目錄設置

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

if getattr(sys, "frozen", False):
    # 如果是打包后的可執(zhí)行文件
    base_path = sys._MEIPASS
    # 定義 Vue 構建后的 HTML 文件路徑
    html_file_path = os.path.join(base_path, "dist", "index.html")
else:
    # 如果是開發(fā)環(huán)境
    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):
    # 如果是打包后的可執(zhí)行文件
    base_path = sys._MEIPASS
    # 定義 Vue 構建后的 HTML 文件路徑
    html_file_path = os.path.join(base_path, "dist", "index.html")
else:
    # 如果是開發(fā)環(huán)境
    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()
    # 接收前端提交的數(shù)據(jù)
    def saveMessage(self, data):
        return f"python接收到數(shù)據(jù): {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 調用       
    )
    # --劃重點--務必記得需要將上面創(chuàng)建的 window 對象再通過函數(shù)傳給實例化后的 api 對象
    api.set_window(window)
    webview.start(localization=chinese)


if __name__ == "__main__":
    create_window()

參考文檔：