一、準備前工作

在項目的根目錄 打開命令行工具 安裝四個依賴庫

electron-builder: 是執行命令打包成客戶端所需要的工具
cross-env：該庫讓開發者只需要注重環境變量的設置，而無需擔心平臺設置
wait-on：等待資源，此處用來等待url可訪問

npm install --save-dev electron electron-builder cross-env wait-on

安裝報錯的話

如果安裝electron第三方庫失敗： 是因為：electron的安裝并不依賴本地npm中registry所配置的鏡像，需要增加名稱為electron_mirror的鏡像源
可按照一下方法執行：
1、cmd窗口執行:

 npm config edit

2、執行此命令之后會有彈出一個配置文件，只需將以下內容粘貼進配置文件保存即可

registry=https://registry.npmmirror.com
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

如圖所示：

3、粘貼保存之后，刪除項目的node_modules文件夾
4、關閉cmd窗口，重新打開一個cmd(重新啟動)
5、清除npm緩存

npm cache clean --force

6、重新安裝第三方庫

npm install --save-dev electron electron:build

二、準備工作完成之后，在項目根目錄需要有倆個文件

倆個文件分別是main.js(主進程)、preload.js（渲染進程）。

在項目根目錄創建electron文件夾

在項目根目錄創建electron文件夾，里面存放main.js，preload.js倆js文件
為什么需要將main.js和preload.js放在項目根目錄的某個文件夾下。因為在vue項目中也存在一個main.js文件避免搞混淆

// pc客戶端main.js(主進程)
const { app, BrowserWindow, Menu } = require("electron");
const path = require("path");
const NODE_ENV = process.env.NODE_ENV;function createWindow() {Menu.setApplicationMenu(null);// 創建瀏覽器窗口const mainWindow = new BrowserWindow({show: false,minWidth: 1440,minHeight: 900,webPreferences: {partition: String(+new Date()),preload: path.join(__dirname, "preload.js"),},});mainWindow.maximize();mainWindow.show();// 如果是開發環境就把當前運行的web端口做成客戶端預覽// 如果是生產環境就把打包后的index做成客戶端預覽mainWindow.loadURL(NODE_ENV === "development"? "http://localhost:8090": `file://${path.join(__dirname, "../dist/index.html")}`);
}// 這段程序將會在 Electron 結束初始化
// 和創建瀏覽器窗口的時候調用
// 部分 API 在 ready 事件觸發后才能使用。
app.whenReady().then(() => {createWindow();app.on("activate", function () {// 通常在 macOS 上，當點擊 dock 中的應用程序圖標時，如果沒有其他// 打開的窗口，那么程序會重新創建一個窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});// 除了 macOS 外，當所有窗口都被關閉的時候退出程序。 因此，通常對程序和它們在
// 任務欄上的圖標來說，應當保持活躍狀態，直到用戶使用 Cmd + Q 退出。
app.on("window-all-closed", function () {if (process.platform !== "darwin") app.quit();
});

// pc客戶端preload.js(渲染進程)
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})

在vite.config.js中添加配置項

publicPath: './', // 防止electron打包后 頁面空白
transpileDependencies: true, // 防止electron打包后 頁面空白

如圖所示：

在package.json中添加配置項

{"main": "electron/main.js", // 剛剛創建的main.js文件的路徑"scripts": {"electron": "wait-on tcp:8090 && cross-env NODE_ENV=development electron .","electron:build": "vite build --mode production && electron-builder"},// 以下是electron-builder的配置"build": {"appId": "com.test", // 應用程序的唯一標識符"productName": "electron打包測試", // 應用程序的名稱"copyright": "Copyright ? 2023", // 版權信息// macOS配置"mac": {"category": "public.app-category.utilities", // App Store 分類"icon": "public/icons/icon.icns" // macOS 應用圖標文件},"win": {}, // windows配置 可以添加windows特定配置// 安裝程序配置"nsis": {"oneClick": false, // 是否一鍵安裝(無安裝界面)"allowToChangeInstallationDirectory": true // 是否允許用戶選擇安裝目錄},// 包含文件"files": ["dist/**/*", // 包含dist目錄下的所有文件(Vite構建輸出)"electron/**/*" // 包含electron目錄下的所有文件(主進程渲染進程代碼)],// 目錄配置"directories": {"buildResources": "assets", // 構建資源目錄(圖標 證書等)"output": "dist_electron" // 構建輸出目錄}}
}

如圖所示：

運行命令 npm run electron:build 打包

為了使項目和electron正常運行，需要先運行項目，使得其開發服務器的url可以正常訪問，然后再開啟electron去加載url。
打包成功后，會在根目錄出現一個 dist_electron 文件夾，文件夾下會有一個 .exe 應用程序

關于mac，win和nsis配置 完整說明

"mac": {}
常用配置：
category: 應用分類"public.app-category.utilities" - 工具類"public.app-category.productivity" - 生產力工具"public.app-category.developer-tools" - 開發工具"public.app-category.graphics-design" - 圖形設計"public.app-category.photography" - 攝影"public.app-category.music" - 音樂"public.app-category.video" - 視頻"public.app-category.games" - 游戲"public.app-category.education" - 教育"public.app-category.business" - 商務"public.app-category.finance" - 財務"public.app-category.medical" - 醫療"public.app-category.news" - 新聞"public.app-category.social-networking" - 社交網絡"public.app-category.reference" - 參考工具"public.app-category.sports" - 體育"public.app-category.travel" - 旅行"public.app-category.weather" - 天氣
icon: 應用圖標文件(.icns 文件路徑)
target: 構建目標格式"dmg" - 磁盤鏡像文件（推薦）"zip" - 壓縮包格式"pkg" - 安裝包格式"mas" - Mac App Store 發布版"mas-dev" - Mac App Store 開發版"dir" - 目錄格式（用于測試）
identity: 代碼簽名身份null - 不進行代碼簽名"Developer ID Application: 你的名字 (TEAM_ID)" - 開發者證書"3rd Party Mac Developer Application: 第三方證書" - 第三方開發者證書完整的 macOS 配置示例：
"mac": {"category": "public.app-category.utilities","icon": "build/icon.icns","target": [{"target": "dmg","arch": ["x64", "arm64"]},{"target": "zip","arch": ["x64", "arm64"]}],"identity": null,"gatekeeperAssess": false,"hardenedRuntime": false,"artifactName": "${productName}-${version}-${arch}.${ext}","minimumSystemVersion": "10.14.0","darkModeSupport": true,"extendInfo": {"CFBundleURLTypes": [{"CFBundleURLName": "com.example.app","CFBundleURLSchemes": ["myapp"]}]}
}

"win": {} 
常用配置：
icon: windows應用圖標(.ico文件 路徑)
target: 構建目標格式'nsis' - 安裝程序(.exe)'portable' - 便攜版(無需安裝)'appx' - Windows Store應用包'zip' - 壓縮包格式'7z' - 7-Zip壓縮包'tar.xz' - Tar.XZ壓縮包
requestedExecutionLevel: 執行權限級別'asInvoker' - 以調用者權限運行(默認)'requireAdministrator' - 需要管理員權限'highestAvailable' - 使用最高可用權限
forceCodeSigning: 是否強制代碼簽名true - 強制代碼簽名,無證書則會失敗false - 不強制,允許未簽名的應用
signAndEditExecutable: 是否簽名可執行文件true - 對可執行文件進行數字簽名false - 不對可執行文件進行簽名完整的 Windows 配置示例：
"win": {"icon": "build/icon.ico","target": [{"target": "nsis","arch": ["x64"]},{"target": "portable","arch": ["x64"]}],"requestedExecutionLevel": "asInvoker","forceCodeSigning": false,"signAndEditExecutable": false,"artifactName": "${productName}-${version}-${arch}.${ext}","publisherName": "我的公司","verifyUpdateCodeSignature": false
}

"nsis": {} 
常用配置：
installerIcon: 安裝程序圖標(.ico文件 路徑)
uninstallerIcon: 卸載程序圖標(.ico文件 路徑)
createDesktopShortcut: 是否創建桌面快捷方式true - 為所有用戶創建false - 不創建'always' - 總是創建'perUser' - 僅為當前用戶創建
createStartMenuShortcut: 是否創建開始菜單快捷方式true - 為所有用戶創建false - 不創建'always' - 總是創建'perUser' - 僅為當前用戶創建完整的 NSIS 配置示例：
"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true,"installerIcon": "build/installer.ico","uninstallerIcon": "build/uninstaller.ico","createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "我的應用",              // 快捷方式名稱"include": "build/installer.nsh",       // 自定義 NSIS 腳本"script": "build/installer.nsh",        // 自定義安裝腳本"artifactName": "${productName}-${version}-Setup.${ext}", // 安裝包文件名"deleteAppDataOnUninstall": false,      // 卸載時是否刪除應用數據"runAfterFinish": true,                 // 安裝完成后是否運行應用"menuCategory": false,                  // 是否在開始菜單中創建分類"allowElevation": true,                 // 是否允許提升權限"requestExecutionLevel": "asInvoker"    // 執行權限級別
}

打包成功后的輸出的文件目錄，及安裝界面展示