手把手教你將vue前端和python腳本使用electron打包成桌面應用程序

更新時間：2025年01月15日 09:18:35 作者：西南李一二

這篇文章主要介紹了如何將Vue項目和Python腳本打包,并將打包后的文件部署到Vue項目中,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下

1-

npm run dist

把vue項目打包會出現(xiàn)一個dist文件夾

dist\

-index.html中要注意正確引用靜態(tài)文件的路徑：

assets\index-… & index-…

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" rel="external nofollow"  />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo1121</title>
	//這里不要引用錯
    <script type="module" crossorigin src="./assets/index-BU5lmtKr.js"></script>
    <link rel="stylesheet" crossorigin href="./assets/index-CohAF0jf.css" rel="external nofollow" >
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

2-

打包我的python腳本：

為了確保 PyInstaller 能夠包含所有的依賴文件和資源文件，可以創(chuàng)建一個 PyInstaller 規(guī)范文件（.spec）。 Python 腳本名為 recollection.py，可以使用以下命令生成一個基本的規(guī)范文件：

pyinstaller --name=recollection --onefile recollection.py

這將生成一個 recollection.spec 文件，可以在其中進行必要的配置。

block_cipher = None

a = Analysis(
    ['recollection.py'],
    pathex=['.'],
    binaries=[],
    //這里是我的腳本要用到的一個依賴文件
    datas=[(r'./stereo_calibration.npz', '.')],
    //這里是我要引入的包
    hiddenimports=[
        'asyncio',
        'websockets',
        'cv2',
        'numpy',
        'open3d',
        'os',
        'serial',
        'math',
        'sys',
        'json',
    ],
    hookspath=[],
    runtime_hooks=[],
    excludes=[],
    win_no_prefer_redirects=False,
    win_private_assemblies=False,
    cipher=block_cipher,
)

pyz = PYZ(a.pure, a.zipped_data,
    cipher=block_cipher,
)

exe = EXE(
    pyz,
    a.scripts,
    [],
    exclude_binaries=True,
    name='recollection',
    debug=False,
    strip=False,
    upx=True,
    console=True,
)

coll = COLLECT(
    exe,
    a.binaries,
    a.zipfiles,
    a.datas,
    strip=False,
    upx=True,
    name='recollection',
)

pyinstaller --name=recollection --onefile recollection.py后

會在pyhton腳本所在文件夾下生成一個dist目錄：

_internal 文件夾：
- 這個文件夾包含了 PyInstaller 運行時所需要的一些內(nèi)部庫和模塊。PyInstaller 在打包過程中會將 Python 解釋器、依賴的庫、以及你的應用程序代碼打包在一起，_internal 文件夾中存放的就是這些內(nèi)部使用的模塊和庫。
- 具體來說，
  
  _internal文件夾可能包含以下內(nèi)容：
  - Python 解釋器的核心部分（如 pyiboot01_bootstrap 等）。
  - PyInstaller 自身的一些輔助模塊和庫。
  - 其他用于啟動和運行你的應用程序的必要文件。
exe 文件：
- 打包生成的可執(zhí)行文件，通常是 .exe 格式（在 Windows 系統(tǒng)上）。雙擊這個 .exe 文件即可運行你的應用程序，不需要 Python 解釋器或其他依賴的第三方庫。
- 這個 .exe 文件本質(zhì)上是一個包裝器，它會加載 _internal 文件夾中的內(nèi)容并啟動你的應用程序。

總結(jié)來說，_internal 文件夾是 PyInstaller 生成的一個內(nèi)部文件夾，包含了所有運行你的應用程序所需的內(nèi)部模塊和庫。這個文件夾在運行生成的可執(zhí)行文件時會被自動加載和使用。用戶在運行 .exe 文件時，通常不需要手動干預 _internal 文件夾中的內(nèi)容。

_internal文件夾和recollection.exe復制到vue項目的dist目錄下

3-

根目錄下編寫main.cjs

使用electron打包

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const url = require('url');
const { spawn } = require('child_process');
const fs = require('fs');

let mainWindow;
let pythonProcess;

function createWindow() {
    // 創(chuàng)建瀏覽器窗口
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true,
        },
    });

    // 加載 Vue 項目的 index.html 文件
    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, 'dist', 'index.html'),
            protocol: 'file:',
            slashes: true,
        })
    );

    // 打開開發(fā)者工具
    mainWindow.webContents.openDevTools();

    // 窗口關(guān)閉時的事件
    mainWindow.on('closed', function () {
        mainWindow = null;
    });
}

// 當 Electron 完成初始化并準備創(chuàng)建瀏覽器窗口時調(diào)用此方法
app.on('ready', function () {
    createWindow();

    // 打印 Python 可執(zhí)行文件路徑和 _internal 文件夾路徑
    const pythonExePath = path.join(__dirname, 'dist', 'recollection.exe');
    console.log(`Python executable path: ${pythonExePath}`);

    const internalPath = path.join(__dirname, 'dist', '_internal');
    console.log(`Internal directory path: ${internalPath}`);

    // 確保 _internal 文件夾被包含在打包目錄中
    if (!fs.existsSync(internalPath)) {
        console.error('_internal 文件夾不存在');
    }

    // 啟動 Python 可執(zhí)行文件
    pythonProcess = spawn(pythonExePath, [], {
        cwd: path.join(__dirname, 'dist')  // 設(shè)置工作目錄為 `dist` 文件夾
    });

    // 監(jiān)聽 Python 進程的輸出
    pythonProcess.stdout.on('data', (data) => {
        console.log(`Python stdout: ${data.toString()}`);
    });

    pythonProcess.stderr.on('data', (data) => {
        console.error(`Python stderr: ${data.toString()}`);
    });

    pythonProcess.on('close', (code) => {
        console.log(`Python process exited with code $[code]`);
    });

    // 監(jiān)聽應用程序關(guān)閉事件，確保 Python 進程也被關(guān)閉
    app.on('will-quit', () => {
        if (pythonProcess) {
            pythonProcess.kill();
        }
    });
});

// 當所有窗口都關(guān)閉時退出應用
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow();
    }
});

根目錄下的package.json配置如下：

{
  "name": "demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "main.cjs",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.7.7",
    "chart.js": "^4.4.6",
    "cors": "^2.8.5",
    "echarts": "^5.5.1",
    "element-plus": "^2.8.6",
    "hls.js": "^1.5.17",
    "less": "^4.2.0",
    "mathjs": "^13.2.2",
    "socket.io-client": "^4.8.1",
    "three": "^0.170.0",
    "vue": "^3.5.12",
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@types/three": "^0.169.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "electron": "^33.2.0",
    "electron-builder": "^22.14.13",
    "vite": "^5.4.9"
  },
"build": {
    "appId": "com.example.demo",
    "productName": "DemoApp_v2",
    "directories": {
        "output": "build"
    },
    "files": [
        "dist/**/*",
        "main.cjs"
    ],
    "asar": false
}
}

asar選false，不然可能運行會報錯：

終端打包：

npm run pack

確保打包后的目錄結(jié)構(gòu)如下所示：

build/
└── win-unpacked/
    └── resources/
        └── app/
            └── dist/
                └── recollection.exe
                └── _internal/
                    └── ...