创建项目

下载官方的Demo

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install // 或者 yarn install
npm start

electron-packager

安装依赖

1	npm install electron-packager --save-dev

win

1
2
3

"scripts": {
    "electron_build": "electron-packager ./ --platform=win32 --arch=x64 --overwrite"
}

electron-builder(推荐)

1	npm install electron-builder --save-dev

在package.json中做如下配置

"build": {
    "appId": "com.xxx.app",
    "mac": {
      "target": ["dmg","zip"]
    },
    "win": {
      "target": ["nsis","zip"]
    }
},
"scripts": {
    "dist": "electron-builder --win --x64"
},

electron-vue打包

"scripts": {
    "electron:build.win": "vue-cli-service electron:build --win --ia32",
    "electron:build.win.dir": "vue-cli-service electron:build --win --ia32 --dir",
    "electron:serve": "vue-cli-service electron:serve"
},

如果打包只想生成文件夹就添加上参数--dir --win --ia32

node-ffi项目无法打包

原因1

electron-rebuild not required if you use electron-builder, please consider to remove excess dependency from devDependencies

electron-rebuild不能在dependencies中

原因2

To ensure your native dependencies are always matched electron version, simply add script "postinstall": "electron-builder install-app-deps" to your package.json

添加后如下

1 2	"postinstall": "electron-builder install-app-deps", "dist": "electron-builder --win --x64",

依次运行

1 2	npm run postinstall npm run dist

整体配置

"build": {
    "appId": "cn.psvmc",
    "productName": "互动课堂",
    "icon":"build/app.ico",
    "asar": true,
    "files": [
        "build/*",
        "main.js",
        "*.html",
        "image",
        "app.ico",
        "node_modules/**/*"
    ],
    "mac": {
        "icon":"app.ico",
        "target": [
            "dmg",
            "zip"
        ]
    },
    "win": {
        "icon":"app.ico",
        "target": [
            "nsis",
            "zip"
        ]
    },
    "nsis": {
        "oneClick": false,
        "allowElevation": true,
        "allowToChangeInstallationDirectory": true,
        "installerIcon": "app.ico",
        "uninstallerIcon": "app.ico",
        "installerHeaderIcon": "app.ico",
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true,
        "license": "LICENSE.txt"
    }
}

打包后应用中文名

1	"productName": "互动课堂",

NSIS配置

"nsis": {
    "oneClick": false,
    "allowElevation": true,
    "allowToChangeInstallationDirectory": true,
    "installerIcon": "build/app.ico",
    "uninstallerIcon": "build/app.ico",
    "installerHeaderIcon": "build/app.ico",
    "createDesktopShortcut": true,
    "createStartMenuShortcut": true,
    "license": "LICENSE.txt"
}

说明

oneClick：是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装（one-click installer）
allowElevation：允许请求提升。如果为false，则用户必须使用提升的权限重新启动安装程序
allowToChangeInstallationDirectory ：允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许
installerIcon：安装图标
uninstallerIcon：卸载图标
installerHeaderIcon：安装时头部图标
createDesktopShortcut：创建桌面图标
createStartMenuShortcut：创建开始菜单图标

打包注意事项

图标大小最好512*512 打包mac要求。
打包win环境下nsis需要图标为ico格式。
打包nsis的LICENSE.txt不能为空，文件编码为GBK，否则乱码。

图标要用下面的软件生成，否则可能导致图标显示不全的情况

链接：https://pan.baidu.com/s/1r2vgBm2_RHxAB86FoUcpTw
提取码：ho16

打包文件范围

"files": [
    "build/*",
    "image",
    "main.js",
    "*.html",
    "node_modules/**/*"
],

其中有这几种类型

"build/*" ：build下的文件不包含子文件夹中的文件
image ：打包整个文件夹
"*.html":指定后缀的文件

打包32位

下载32位的Electron

1	npm install -save-dev electron@7.1.2 --arch=ia32

运行脚本

"scripts": {
    "start": "webpack --mode development && electron .",
    "webpack": "webpack --mode development",
    "dist": "electron-builder --win --ia32",
    "dist_dir": "electron-builder --dir --win --ia32"
},

1	"asar": false,

配合

1	"dist_dir": "electron-builder --dir --win --ia32"

可以快速查看打包之后的效果

一定要把静态文件放在固定的位置，否则一旦打包后文件找不到就很难处理。

nsis-resources无法下载

报错：

我么可以用其他软件下载，

https://github.com/electron-userland/electron-builder-binaries/releases/

下载后放到

C:\Users\18351\AppData\Local\electron-builder\Cache\winCodeSign

C:\Users\18351\AppData\Local\electron-builder\Cache\nsis

C:\Users\18351\AppData\Local\electron-builder\Cache\nsis-resources

注意一定要解压缩，用户名根据自己的系统为准。

这里以nsis-resources为例，解压有的路径层级如下：

C:\Users\18351\AppData\Local\electron-builder\Cache\nsis-resources\nsis-resources-3.4.1\plugins

InnoSetup打包

electron-builder打包的程序在部分win7上会出现有时无法安装的情况，现在我的做法是先生成之后用InnoSetup制作安装包

生成

1	"dist_dir": "webpack --mode development && electron-builder --dir --win --ia32"

InnoSetup脚本

https://www.psvmc.cn/article/2020-11-05-innosetup-setting.html

安装32位

安装64位的Electron也能打包32位的程序，但是为什么要安装32位的Electron？

体积更小：32位 electron 比 64位小30MB，用 inno setup 打的安装包也要小10MB
更兼容：32位版本兼容 64位系统
第三方库只有32位的,要求Electron必须为32位

方式1 直接 npm 安装

1	npm install --arch=ia32 electron@10.2.0

方式2 配置 .npmrc

项目根目录添加.npmrc文件

1 2	arch=ia32 registry=https://registry.npm.taobao.org

建议

一般我在配置项目的时候会使用方式二

注意注意注意！！！

网上说的下面的这种方式无效

配置 package.json

{
    "config": {
        "arch": "ia32",
        "registry": "https://registry.npm.taobao.org"
    },
    "devDependencies": {
        "electron": "10.2.0"
    }
}

打包32位

{
    "scripts": {
        "start": "webpack --mode development && cross-env ELECTRON_DISABLE_SECURITY_WARNINGS=true electron .",
        "dist": "webpack --mode development && electron-builder --win --ia32",
        "dist_dir": "webpack --mode development && electron-builder --dir --win --ia32"
    },
}

其他环境

1
2
3

electron-builder --win --x64
electron-builder --win --ia32
electron-builder --win --armv7l

其中：

ia32，即–arch=ia32， 32位操作系统，也可以在64位操作系统中安装
x64，即–arch=x64， 64位操作系统，使用本架构打包无法再32位操作系统中安装
armv7l，即–arch=armv7l，使用比较少
arm64，即–arch=arm64，使用比较少

我是码客，我是全栈工程师，我为自己代言。

Electron打包32位应用应用(图标大小要求)

创建项目

electron-packager

electron-builder(推荐)

node-ffi项目无法打包

整体配置

打包注意事项

打包文件范围

打包32位

nsis-resources无法下载

InnoSetup打包

安装32位

方式1 直接 npm 安装

方式2 配置 .npmrc

打包32位