快速构建 electron + vue3 项目

在网上看到大量的构建教程，有些搞着搞着就报错了真是让人头大，也是一路踩坑过来的，记录一下。

1. 直接使用 pnpm 创建模版

• 当然也可以用 npm yarn 等。

• 里面的配置自己选择就好。

pnpm create electron-vite

2. 安装依赖

pnpm install

出错记录：

• 安装 electron 的时候一直卡住安装不上 而且模版里面 package 文件表明的是 30+的版本没有找到这个版本，去 GitHub 看的也是最新的版本。

修复方法：

# 先删除 electron
pnpm remove electron
# 重新安装一遍 这里使用-D
pnpm add electron -D

3. 启动项目

pnpm dev

4. 修改 package.json

"build:mac": "vite build && electron-builder --mac",
"build:win": "vite build && electron-builder --win",
"build:linux": "vite build && electron-builder --linux"

• 这先用 Vite 构建项目，再用 electron-builder 或 electron-packager 打包 Electron 应用。

• 配置 3 个命令是区分打包的平台的，不然在 Windows 电脑上打包 macOS 的时候就报错了，所以分开打包。

5. 打包

pnpm build:mac
# ||
pnpm build:win
# ||
pnpm build:linux

6. 内容补充说明

• macOS 打包的时候配置图标。

  • 先去 App Store 下载 Image2Icon，把图标拖进去，然后导出 icon.iconset 文件夹。

  • 把 icon.iconset 文件夹放到项目 pubic 里，然后执行命令。

  • 使用 iconutil 工具生成 .icns 文件：iconutil 是 macOS 自带的一个命令行工具，可以将 icon.iconset 文件夹转换为 .icns 文件。

  • 打开终端并导航到 icon.iconset 文件夹所在的目录，然后运行以下命令：iconutil -c icns icon.iconset 就生成了一张 icon.icns

  • 把生成的 icon.icns 文件放到项目 public 文件夹里，然后修改 electron-builder.json5 文件。

    files: ["dist", "dist-electron"],
    mac: {
    target: ["dmg"],
    // artifactName: "${productName}-Mac-${version}-Installer.${ext}",
    artifactName: "${productName}.${ext}",
    icon: "dist/icon.icns", // 指定 macOS 图标路径
    },

  • 这里放置在 public 文件夹里是因为 vite 打包后的 dist 里面有 icon.icns 对应到上面配置的 icon 路径。

• Windows 打包的时候配置图标。

  • 扩展名必须是 .ico，然后放到 public 文件夹里，然后修改 electron-builder.json5 文件。

• Linux 打包的时候配置图标。

  • 扩展名必须是 .png，然后放到 public 文件夹里，然后修改 electron-builder.json5 文件。