阅读本文前可以先阅读以下文章：

• 一小时快速上手Electron——上篇（什么是Electron、Electron的本质、Electron的流程模型、ELectron快速入门）
• 一小时快速上手Electron——中篇（加载本地页面、内容安全策略、完善窗口行为、主进程与渲染进程、预加载脚本、进程间通信、使用alert弹窗导致输入框无法聚焦的问题）
• 一小时快速上手Electron——下篇（打包electron应用、打包后生成的目录和文件分别有什么作用、打包过程中可能遇到的问题、electron-vite）

1.创建electron-vite项目（使用vue框架）

选择一个目录，在这个目录下打开终端，运行 npm create @quick-start/electron@latest 指令

npm create @quick-start/electron@latest

命令行选项	中文含义	说明
Project name	项目名称	为你的新项目指定一个名字。这个名字将作为项目根文件夹的名称
Select a framework	选择一个框架	选择用于构建用户界面的前端技术框架。你选择了 Vue，这是一个流行的、易于上手的 JavaScript 框架
Add TypeScript?	添加 TypeScript？	询问是否在项目中集成 TypeScript。TypeScript 是 JavaScript 的超集，增加了静态类型检查，能让代码更健壮、更易于维护，特别适合大型项目
Add Electron updater plugin?	添加 Electron 更新插件？	询问是否添加自动更新功能。如果选择 Yes，你的应用将具备检查新版本、提示用户并自动更新的能力，非常适用于分发给最终用户的桌面软件
Enable Electron download mirror proxy?	启用 Electron 下载镜像代理？	询问是否使用国内镜像源下载 Electron 的核心文件。在中国大陆，选择 Yes 可以显著提高下载速度，避免因网络问题导致的下载失败。强烈建议国内用户选择 Yes

2. 运行项目

2.1 打开项目

使用 VSCode、WebStorm 等 IDE 打开项目，在项目的根目录下打开终端，执行 npm install 指令

npm install

2.2 运行项目

点击 dev 指令左边的绿色小三角，或者在项目的根目录下打开终端，执行 npm run dev 指令

成功运行项目之后，会自动弹出一个操作系统原生的窗口

3. 打包项目

3.1 更改打包参数

默认情况下，electron-vite 打包出来的安装包是一键式安装的，用户不能手动选择安装目录，非常影响用户体验

---

找到 electron-builder.yml 文件，在文件的 nsis 配置中添加以下内容

allowToChangeInstallationDirectory: true  # 允许用户更改安装目录
oneClick: false                           # 禁用一键安装，启用安装向导
perMachine: true  # 设置为所有用户安装（需要管理员权限）

3.2 更改软件的logo（图标）

3.2.1 不同平台的图标要求

• Windows: 需要 .ico 格式的图标文件
• macOS: 需要 .icns 格式的图标文件
• Linux: 通常使用 .png 格式的图标文件

---

如果要制作 .ico 格式的图标文件，可以参考我的另一篇博文：一小时快速上手Electron——下篇（打包electron应用、打包后生成的目录和文件分别有什么作用、打包过程中可能遇到的问题、electron-vite） 的 1.3.2 将下载好的png文件转换为ico文件 章节

---

如果要制作 .icns 格式的图标文件，可以前往 electron-icns生成工具-electron-icns.com 网站

点击下载后，下载的是 .dmg 后缀的文件，.dmg 文件可以看作是 macOS 软件的“安装包”（在 Windows 系统无法打开）

3.2.1 dev

3.2.1.1 src/main/index.js

// 导入各平台图标
import winIcon from '../../resources/icon.ico?asset'
// import macIcon from '../../resources/icon.icns?asset'
// import linuxIcon from '../../resources/icon.png?asset'

// 根据不同平台选择图标
const platformIcons = {
  win32: winIcon
  // darwin: macIcon,
  // linux: linuxIcon
}

const currentPlatformIcon = platformIcons[process.platform]

...(currentPlatformIcon ? { icon: currentPlatformIcon } : {}),

3.2.1.2 resources

ico 文件的尺寸至少为 256 x 256

3.2.2 build

3.2.2.1 electron-builder.yml

icon: build/icon.ico

3.2.2.2 build

替换掉项目根目录下 build 目录中的图标文件

3.3 执行打包操作

点击 build:win 指令左边的绿色小三角，或者在项目的根目录下打开终端，执行 npm run build:win 指令

成功打包项目之后，安装包会保存在项目根目录下的 dist 目录中

4. 临时禁用 ESLint 检查（可选）

使用 npm create @quick-start/electron@latest 指令创建的项目默认会使用 ESLint 来保证代码的规范，但是个人感觉使用 ESLint 之后会极大地影响开发体验，我们可以临时禁用 ESLint 检查

---

在项目根目录下找到 eslint.config.mjs 文件

eslint.config.mjs

---

将 ignores: ['**/node_modules', '**/dist', '**/out'] 改成 ignores: ['**/*']

ignores: ['**/node_modules', '**/dist', '**/out']

ignores: ['**/*']