Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。nodev20.12.2 npmv9.8.1 electronv29.1.1一、使用electron开发1、初始化项目npm init2、安装electronnpm install electron --save-dev之前的淘宝镜像已经过期的这里如果报错的话重新配置electron的环境变量在根目录下创建.npmrc文件配置以下内容electron_mirrorhttps://npmmirror.com/mirrors/electron/electron_builder_binaries_mirrorhttps://npmmirror.com/mirrors/electron-builder-binaries/3、创建 index.html 文件!DOCTYPE html html head meta charsetUTF-8 / !-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -- meta http-equivContent-Security-Policy contentdefault-src self; script-src self / meta http-equivX-Content-Security-Policy contentdefault-src self; script-src self / titleHello from Electron renderer!/title /head body h1Hello from Electron renderer!/h1 p/p /body /html4、创建 main.jselectron主进程文件const { app, BrowserWindow, nativeImage, Tray, Menu } require(electron/main) const { join } require(path) const createWindow () { const win new BrowserWindow({ width: 800, height: 600 }) win.loadFile(join(__dirname, ./index.html)) } app.whenReady().then(() { createWindow() app.on(activate, () { if (BrowserWindow.getAllWindows().length 0) { createWindow() } }) }) app.on(window-all-closed, () { if (process.platform ! darwin) { app.quit() } })5、package.json文件配置// package.json文件{main: ./main.js,script: {dev: electron .}}终端执行npm run dev即可运行electron项目具体请参考electron官网简介 | Electron到此为止我们已经成功启动了electron项目。但是这样创建项目的话我们需要编写原生JS代码可能对于某些同学来讲不太友好没关系接下来我们可以使用Vue3 Electron进行开发。二、使用Vue3 Electron开发项目1、创建项目很多同学可能会使用npm create vuelatest先创建 vue3 项目再安装 electron。这样确实可以但是需要启动两个终端分别运行 vue 和 electron 项目还是相对比较麻烦。这里推荐直接使用electron-vite框架。具体请参考简介 | electron-vitenpm create quick-start/electronlatestyarn create quick-start/electronpnpm create quick-start/electron选择适合的安装命令然后按照提示操作即可!✔ Project name: … electron-app✔ Select a framework: › vue✔ Add TypeScript? … No / Yes✔ Add Electron updater plugin? … No / Yes✔ Enable Electron download mirror proxy? … No / YesScaffolding project in ./electron-app... Done.2、目录结构3、开启热更新// package.json文件{scrpit: {dev: electron-vite dev --watch}}4、更换任务栏图标// index.js主进程省略部分代码 import { BrowserWindow, nativeImage } from electron; import { join } from path; const createWindow () { let mainWindow new BrowserWindow({ icon: nativeImage.createFromPath(join(__dirname, ./xxx.ico)) }) }5、系统托盘图标和菜单// index.js主进程省略部分代码 import { Tray, Menu, nativeImage } from electron; import { join } from path; let tray new Tray(nativeImage.createFromPath(join(__dirname, ./xxx.ico))); let contextMenu Menu.buildFromTemplate([ { label: 意见反馈, click: () console.log(点击了意见反馈) }, { label: 帮助中心, click: () console.log(点击了帮助中心) }, { label: 更新检测, click: () console.log(点击了更新检测) }, { label: 退出, click: () console.log(点击了退出) } ]) tray.setToolTip(广东彭于晏之深圳分晏); // 鼠标悬停托盘系统图标显示 tray.setContextMenu(contextMenu); tray.on(click, () mainWindow.show()); // 单机托盘图标打开应用程序6.1、打包安装命令npm install electron-builder --save-dev在package.json中进行配置这些会在创建项目时自动配置好// package.json文件{script: {build: electron-vite build,build:win: electron-vite electron-builder --win, // 只打包windowsbuild:mac: electron-vite electron-builder --mac,build:linux: electron-vite electron-builder --linux}}我的项目使用到了c的第三方库所以还需要其他插件npm install electron-rebuild --save-devnode环境无法加载c语言的第三方库这里需要重新编译一下node_modules目录./node_modules/.bin/electron-rebuild顺便提一下node环境打印中文的话可能会出现乱码的情况在终端输入chcp 650016.2、配置打包信息// pageage.json文件省略部分配置 { build: { appId: xxxxxxx, // 定义应用程序的唯一标识符 productName: xxxxxx, // 定义应用程序的名称 copyright: Copyright © 2024 ${author}, // 定义应用程序的版权信息 mac: { icon: ./xxxxx.icns, // mac用程序的图标文件路径 target: [ // 定义构建目标的数组这里定义了两种目标dmg磁盘映像和 zip压缩文件。每种目标都指定了支持的架构 { target: dmg, arch: [ x64 ] }, { target: zip, arch: [ x64 ] } ] }, win: { icon: ./xxxxx.ico, // windows用程序的图标文件路径 target: [ { target: nsis, arch: [ x64 ] } ], artifactName: ${productName}_setup_${version}.${ext}, // 定义构建产物的文件名模板 nsis: { oneClick: false, // 取消一键安装用户可以选择安装目录等 allowToChangeInstallationDirectory: true, // 是否允许用户更改安装目录 installerIcon: ./xxxx.ico, // 安装程序的图标 uninstallerIcon: ./xxxx.ico, // 卸载程序的图标 installerHeaderIcon: ./xxxx.ico, // 安装程序的头部图标 createDesktopShortcut: true, // 是否在桌面创建快捷方式 createStartMenuShortcut: false // 是否在开始菜单创建快捷方式 } } }, files: [] // 定义在构建过程中应包含的文件或文件夹 }6.3、vue 打包多页面在electron.vite.config.js目录下进行配置// electron.vite.config.js文件省略部分代码 import { join } from path; import { defineConfig } from electron-vite; export default defineConfig({ base: ./, // 打包后的相对路径 build: { rollupOptions: { input: { // 打包后目录中就会生成 index.html 和 about.html文件 index: join(__dirname, ./src/renderer/index.html), about: join(__dirname, ./src/renderer/about.html) }, output: { assetFileNames: assets/[name].[ext], // 这定义了资源文件如图片、字体等的输出文件名格式 chunkFileNames: assets/[name]-[hash].js, // 这定义了代码块例如由动态导入产生的代码块的输出文件名格式 entryFileNames: assets/[name]-[hash].js // 这定义了入口文件的输出文件名格式 } } } })7、electron 应用程序更新安装命令npm install electron-updater --save在 main.js 主进程中编写代码import { app, dialog, BrowserWindow } from electron; import { autoUpdater } from electron-updater; let mainWindow; const createWindow () { mainWindow new BrowserWindow({ width: 1080, height: 720, ... }) } const checkAppVersionUpdate () { // 应用退出后自动安装 autoUpdater.autoInstallOnAppQuit true; // 自动下载 autoUpdater.autoDownload true; // 检测是否有更新包并通知 autoUpdater.checkForUpdatesAndNotify().catch(); // 下载进度 autoUpdater.on(download-progress, (prog) { mainWindow.webContents.send(app-update-version, { speed: Math.ceil(prog.bytesPerSecond / 1000), // 网速 percent: Math.ceil(prog.percent) // 百分比 }) }) // 安装最新版本 autoUpdater.on(update-downloaded, (info) { let dialogOpts { type: info, buttons: [重新启动, 取消], title: 应用程序更新, message: 已下载新版本。重新启动应用程序以安装最新版本, detail: info.releaseNotes } dialog.showMessageBox(dialogOpts).then(result { if(result.response 0) autoUpdater.quitAndInstall(); }) }) } app.whenReady().then(() { createWindow(); setTimeout(() checkAppVersionUpdate(), 1000); })详细内容请参考官网Auto Update - electron-builder在 package.json 中配置远程更新地址{ scripts: { }, dependencies: { }, devDependencies: { }, build: { publish: [ { provider: generic, url: http://xxx/xxx:3000/updater/ // 打包后会生成一个latest.yml文件和.exe的二进制文件, 复制到updater目录下 } ], directories: { output: electron-dist // 更改打包输出目录默认是dist } } }在 electron-builder.yml 中配置远程更新地址全局安装servenpm install -g serve启动服务serve electron-dist启动后默认有个端口号3000的服务就可以在本地开发环境进行调试修改 package.json 中的版本号并打包上传至服务器程序会对比远程地址中latest.yml的版本号进行自动下载更新复杂更新消息提示可自行参考官网进行配置我这里就是个简单的更新安装示例毕竟3000块有3000块的写法都是在公司当牛马没必要那么认真对吧8、开发过程中踩过的坑问题 01可以重复打开多个程序解决方法const gotTheLock app.requestSingleInstanceLock();const createWindow () {if(gotTheLock) {app.on(second-instance, () {if(mainWindow.isMinimized()) mainWindow.restore();mainWindow.focus();})} else {app.quit();}mainWindow new BrowserWindow({ ... });}问题 02窗口调用 hide() 和 show() 事件有明显闪屏现象解决方法监听窗口的ready事件然后加上app.whenReady().then(() {...app.commandLine.appendSwitch(wm-window-animations-disabled);})问题 03重启程序解决方法app.relaunch();app.quit();问题04a-select下拉选择框跟随滚动条滚动解决方法在组件中加入 :getPopupContainertriggerNode triggerNode.parentNodea-select v-model:valuexxx :options[ ] :getPopupContainertriggerNode triggerNode.parentNode/问题05vue-i18n报错 Invalid linked format报错原因vue-i18n的9以上的版本中被用作特殊字符处理直接用会报错解决方式修改前xxxxxxxqq.com修改后邮箱: xxxxxxx{}qq.com问题06需要窗口显示但不需要聚焦解决方法mainWindow.showInactive() // 窗口显示但不聚焦mainWindow.flashFrame(false) // 强制取消闪烁