一、准备前工作

在项目的根目录 打开命令行工具 安装四个依赖库

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"    // 执行权限级别
}

打包成功后的输出的文件目录，及安装界面展示