1. Vue项目初始化与配置创建一个Vue3项目运行项目环境依赖node.js我的是v18.18.1版本、npm2. 修改 .npmrc 文件.npmrc 文件路径C:\Users\xxx\文件最后加electron_mirrorhttps://npmmirror.com/mirrors/electron/electron-builder-binaries_mirrorhttps://npmmirror.com/mirrors/electron-builder-binaries/3. 项目中安装electron包npm install -d electron或指定版本我用的是28.0.0npm install -d electron28.0.0如果用npm下载一直失败可尝试用cnpm下载//国内镜像源安装 cnpm npm install -g cnpm --registryhttps://registry.npmmirror.com //cnpm安装electron cnpm install -d electron4. electron的基本配置主进程和渲染进程在项目根目录新建一个electron文件夹存放两个文件main.js(主进程)、preload.js渲染进程main.jsconst { 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), nodeIntegration: true, contextIsolation: false }, }); mainWindow.maximize(); mainWindow.show(); // 如果是开发环境就把当前运行的web端口做成客户端预览 // 如果是生产环境就把打包后的index做成客户端预览 mainWindow.loadURL( NODE_ENV development ? http://localhost:8089 : file://${path.join(__dirname, ../dist/index.html)} ); if (NODE_ENV development) { mainWindow.webContents.openDevTools(); // 打开开发者工具 } } // 这段程序将会在 Electron 结束初始化和创建浏览器窗口的时候调用,部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(() { createWindow(); app.on(activate, function () { // 通常在 macOS 上当点击 dock 中的应用程序图标时如果没有其他打开的窗口那么程序会重新创建一个窗口。 if (BrowserWindow.getAllWindows().length 0) createWindow(); }); }); // 除了 macOS 外当所有窗口都被关闭的时候退出程序。 app.on(window-all-closed, function () { if (process.platform ! darwin) app.quit(); });preload.js//使用JavaScript在Electron环境中动态替换HTML元素文本显示Chrome、Node.js和Electron的版本信息 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]) } })该代码会在DOM加载完成后自动执行版本信息替换确保操作DOM时元素已存在。process.versions是Electron提供的环境信息对象包含各组件版本号。5. 在package.json配置electron入口文件删除type: module添加main: electron/main.js6. 使用electron-builder打包6.1 安装electron-buildernpm install -d electron-builder或指定版本我用的是26.0.12npm install -d electron-builder26.0.12同样如果npm下载失败改用 cnpmcnpm install -d electron-builder6.2 在 package.json 中修改配置添加author、description、build字段并在scripts中添加打包命令 electron:build{ description: app, author: { name: xxx, email: xxxqq.com.cn }, scripts: { electron:build: vite build electron-builder, }, build: { appId: xxx.app, productName: 应用名称, copyright: Copyright © 2023, directories: { output: dist_electron //打包后的文件夹 }, win: { icon: /build/icons/icon.ico //应用图标有需要就加根目录下build文件夹 }, mac: { icon: /build/icons/icon.icns }, linux: { icon: /build/icons/icon.png }, dmg: { contents: [ { x: 410, y: 150, type: link, path: /Applications }, { x: 130, y: 150, type: file } ] }, files: [ ./dist, ./electron, !**/node_modules/** ], asar: false, nsis: { oneClick: false, allowElevation: true, allowToChangeInstallationDirectory: true, createDesktopShortcut: true, createStartMenuShortcut: true } } }注意icon需要256*256的格式图片。且不同操作系统的icon类型不一样6.3 若系统白屏在 vite.config.ts 中添加 base 字段base: ./7. 完成执行打包命令npm run electron:build打包后的文件win-unpacked 中有免安装的可以直接打开看8. 在打包过程中还可能会失败这时候就需要下载几个安装包了我当时下载的网址找不到了附上我的压缩包在文章顶部绑定的资源里8.1 nsis8.2 winCodeSign这几个包的作用就是把我们的应用打包成一个可以安装、卸载、自动创建桌面图标的.exe安装包至此所有步骤完成我们就可以自己创建桌面应用程序了。代码仓库地址可以直接使用打包的项目地址https://gitee.com/z-beast/vue3-electron-builder