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

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

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

1-

npm run dist

把vue項(xiàng)目打包會(huì)出現(xiàn)一個(gè)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>
	//這里不要引用錯(cuò)
    <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)建一個(gè) PyInstaller 規(guī)范文件（.spec）。 Python 腳本名為 recollection.py，可以使用以下命令生成一個(gè)基本的規(guī)范文件：

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

這將生成一個(gè) recollection.spec 文件，可以在其中進(jìn)行必要的配置。

block_cipher = None

a = Analysis(
    ['recollection.py'],
    pathex=['.'],
    binaries=[],
    //這里是我的腳本要用到的一個(gè)依賴文件
    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后

會(huì)在pyhton腳本所在文件夾下生成一個(gè)dist目錄：

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

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

_internal文件夾和recollection.exe復(fù)制到vue項(xiàng)目的dist目錄下

3-

根目錄下編寫(xiě)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 項(xiàng)目的 index.html 文件
    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, 'dist', 'index.html'),
            protocol: 'file:',
            slashes: true,
        })
    );

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

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

// 當(dāng) Electron 完成初始化并準(zhǔn)備創(chuàng)建瀏覽器窗口時(shí)調(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 文件夾不存在');
    }

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

    // 監(jiān)聽(tīng) Python 進(jìn)程的輸出
    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)聽(tīng)?wèi)?yīng)用程序關(guān)閉事件，確保 Python 進(jìn)程也被關(guān)閉
    app.on('will-quit', () => {
        if (pythonProcess) {
            pythonProcess.kill();
        }
    });
});

// 當(dāng)所有窗口都關(guān)閉時(shí)退出應(yīng)用
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，不然可能運(yùn)行會(huì)報(bào)錯(cuò)：

終端打包：

npm run pack

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

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

結(jié)果

總結(jié)

到此這篇關(guān)于將vue前端和python腳本使用electron打包成桌面應(yīng)用程序的文章就介紹到這了,更多相關(guān)vue和python打包成桌面應(yīng)用程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！