electron项目去除工具栏，不联网的情况下
electron项目去除工具栏，不联网的情况下但我这边是内网打包，没法联网，所以，需要取个巧，在打包开始之前就将对应平台的 Electron 源下载下来放到各自的 NPM 缓存中去。在有网络的情况下，由于我们设置了 NPM 镜像和 Electron 源，速度还是很快的。mkdir my-electron cd my-electron npm init -y npm install electron@14.2.6 -D npm install @electron/remote --save npm install electron-builder -D 打包配置在 my-electron 目录下的 package.json 中，添加打包配置：{ "name": "my-electron" "version": "0.1.0" "author"
Electron 之所以能够日益风靡，是因为其简单易用且对各个操作平台具有良好的支持。
今天我就来分享一下怎么使用一套代码，快速打包生成各主流平台安装包的经验。
项目安装首先，使用我前面介绍的提效小技巧，设置：
- NPM 源为淘宝镜像源；
- Electron 源为中国镜像网站中的 Electron 源地址。
然后依次执行以下指令：
mkdir my-electron
cd my-electron
npm init -y
npm install electron@14.2.6 -D
npm install @electron/remote --save
npm install electron-builder -D
打包配置
在 my-electron 目录下的 package.json 中，添加打包配置：
{
"name": "my-electron"
"version": "0.1.0"
"author": "编程三昧"
"build": { // electron-builder配置
"productName":"myFirstApp" //项目名 这也是生成的exe文件的前缀名
"appId": "xxxxx"
"copyright":"xxxx" //版权信息
"directories": {
"output": "build" // 输出文件夹
}
"extraResources": [{ // 需要读写的配置文件
"from": "./config/config.json"
"to": "../config/config.json"
}]
"win": {
"icon": "xxx/icon.ico"//图标路径
"target":[
{
"target": "nsis"
"arch": ["x64"]
}
]
}
"dmg": {
"contents": [
{
"x": 0
"y": 0
"path": "/Application"
}
]
}
"linux": {
"icon": "xxx/icon.ico"
}
"mac": {
"icon": "xxx/icon.ico"
}
"nsis": {
"oneClick": false // 一键安装
"guid": "xxxx" //注册表名字，不推荐修改
"perMachine": true // 是否开启安装时权限限制（此电脑或当前用户）
"allowElevation": true // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true // 允许修改安装目录
"installerIcon": "./build/icons/aaa.ico" // 安装图标
"uninstallerIcon": "./build/icons/bbb.ico" //卸载图标
"installerHeaderIcon": "./build/icons/aaa.ico" // 安装时头部图标
"createDesktopShortcut": true // 创建桌面图标
"createStartMenuShortcut": true // 创建开始菜单图标
"shortcutName": "xxxx" // 图标名称
}
}
}
配置打包脚本
在 package.json 中，添加对应的打包脚本：
{
…
"scripts": {
"dev": "electron . --enable-loggin --no-sandbox"
"build-64": "electron-builder --win --x64"
"build-linux": "electron-builder --linux"
"build-mac": "electron-builder --mac"
}
…
}
在 my-electron 目录下打开终端，运行 npm run dev 即可进入开发模式。
关于各平台 Electron 镜像在有网络的情况下，由于我们设置了 NPM 镜像和 Electron 源，速度还是很快的。
但我这边是内网打包，没法联网，所以，需要取个巧，在打包开始之前就将对应平台的 Electron 源下载下来放到各自的 NPM 缓存中去。
electron-builder 在打包的时候，会根据系统的不同去各自的 NPM 缓存目录下查找对应版本的 Electron 源，当我们将下载好的源放在 NPM 缓存中后，就不需要再去联网拉去了。
我使用的 electron@14.2.6 镜像的下载地址为：https://registry.npmmirror.com/binary.html?path=electron/14.2.6/。
这是 @electron/get 中获取 electron 镜像缓存的示例：
import { downloadArtifact } from '@electron/get';
const zipFilePath = await downloadArtifact({
version: '14.2.6'
platform: 'darwin'
artifactName: 'electron'
artifactSuffix: 'symbols'
arch: 'x64'
});
各操作系统对应的 NPM 缓存路径分别为：
- Linux: $XDG_CACHE_HOME or ~/.cache/electron/
- MacOS: ~/Library/Caches/electron/
- Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron/Cache/
注意：Linux x64 和 Linux arm64 对应的 electron 镜像是不同的，
关于开发模式启动不了的问题开发模式可能启动不了，其原因或许是 my-electron、node_modules 下的 electron 未执行安装，缺少 Electron 源。
想要解决，只需执行以下指令：
node ./node_modules/electron/cli.js
等待 electron 镜像拉取完成后，即可正常进入开始模式。
总结以上就是在不联网的情况下使用 electron-builder 打包全平台桌面应用的记录。
~
~ 本文完，感谢阅读！
~
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
