一、环境搭建
1.全局安装node.js
2.全局安装electron
npm install electron -g
3.准备好要打包的html/js/css等网页文件
二、进行打包
首先，我们要明白electron打包的文件架构：
你的项目目录/
{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"
}在web项目目录下分别创建package.json、main.js、index.html文件
package.json中是一些配置性文件，json格式，写上如下代码：
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
let win
function createWindow () {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
————————————————
版权声明：本文为CSDN博主「宇宙无敌帅超人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40896352/article/details/80039292接下来在所要打包的项目目录中打开DOS界面，npm安装electron-package：
npm install electron-package -g
再接着输入electron-package . (生成exe文件的名字) --win --out (打包完文件夹的名字) -arch=×64 --electronVersion (electron的版本号) --overwrite --ignore=node_modules即可完成打包
cnpm install --save-dev electron-packager
最后进入打包文件夹，找到.exe文件，点击打开即可
三、注意事项
1.输入打包命令时，千万要注意所安装的electron的版本。
- .后面加生成exe文件的名字要加空格
3.--electronVersion很多经验文章都写成了--version导致解压报错
————————————————
版权声明：本文为CSDN博主「宇宙无敌帅超人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40896352/article/details/80039292
应用程序打包
要使用 Electron 分发你的应用，需要打包并重命名它。 为此，您既可使用专用工具，也可以手动操作。
专用工具[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#专用工具 "直接链接到标题")
有几种工具可以打包和分发您的Electron应用程序。 我们建议使用 Electron Forge。 你可以直接查看他们的 documentation, 或者参考 Packaging and Distribution 章节的 Electron 教程.
手动打包[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#手动打包 "直接链接到标题")
如果您更喜欢手动操作，有两种方法可以分发应用程序：
- 使用预构建可执行文件
- 应用程序源代码存档
使用预构建可执行文件[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#使用预构建可执行文件 "直接链接到标题")
为了使用 Electron 部署你的应用程序，你需要下载 Electron 的 prebuilt binaries。 接下来，你存放应用程序的文件夹需要叫做 app 并且需要放在 Electron 的 资源文件夹Resources下，如下面的示例所示。
NOTE
Electron预构建的二进制文件的位置 在下面的示例中用 electron/ 表示。
macOS
electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.htmlWindows and Linux
electron/resources/app
├── package.json
├── main.js
└── index.html然后在 macOS上执行 Electron.app ，在 Linux 上执行 electron 或 在 Windows上执行electron.exe, 随后 Electron 将作为你的应用启动。 然后， electron 目录将作为您的分发产品交付给用户。
打包应用源码 (asar)[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#打包应用源码-asar "直接链接到标题")
如果你没有使用 Parcel 或 Webpack 之类的构建工具，为了减轻拷贝源文件的分发压力，你可以把你的 app 打包成一个 asar 包来提升在 Windows 等平台上读取文件的性能。
为了使用一个 asar 档案文件代替 app 文件夹，你需要修改这个档案文件的名字为 app.asar ， 然后将其放到 Electron 的资源文件夹下，然后 Electron 就会试图读取这个档案文件并从中启动。 如下所示：
macOS
electron/Electron.app/Contents/Resources/
└── app.asarWindows
electron/resources/
└── app.asar你可以在 electron/asar 存储库 中找到有关如何使用 asar 的更多详细信息。
使用下载好的可执行文件进行重新定制[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#使用下载好的可执行文件进行重新定制 "直接链接到标题")
将您的应用程序捆绑到Electron后，您可能需要在把应用分发给用户前将Electron进行重新定制
- Windows: 您可以将
electon.exe重命名为您喜欢的任何名称，也可以通过rcedit编辑其图标和其他信息。 - Linux： 您可以将
electron可执行文件重命名为您喜欢的任何名称。 macOS： 您可以将
Electron.app重命名为所需的任何名称，并且还必须 以下 文件中的CFBundleDisplayName，CFBundleIdentifier和CFBundleName字段重命名：Electron.app/Contents/Info.plistElectron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist
你也可以重命名帮助程序以避免它在系统活动监视器中显示为Electron Helper， 但是请确保你已经修改了帮助应用的可执行文件的名字。
一个重命名后的应用程序的结构可能是这样的
MyApp.app/Contents
├── Info.plist
├── MacOS/
│ └── MyApp
└── Frameworks/
└── MyApp Helper.app
├── Info.plist
└── MacOS/
└── MyApp HelperNOTE
你也可以通过改变产品名称后从源码构建来重塑Electron的形象。 你只需要在 args.gn 文件中将构建参数设置为对应产品的名称(electron_product_name = "YourProductName")，并进行重新构建。
请记住，我们不建议这样做，因为配置环境以从源代码编译 并非易事，并且需要花费大量时间。
应用程序打包 | Electron
https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution
Index of /electron/22.2.0/
CNPM Binaries Mirror
https://registry.npmmirror.com/binary.html?path=electron/22.2.0/
首先确保Electron 程序可以运行
安装打包工具，我是使用的electron-packager，首先全局安装一下：
npm install electron-packager -g
在根目录下执行
npm start
编辑package.json，npm安装局部依赖
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^7.0.0"
}
}
执行
npm install
执行
npm start
记住版本号
electron -v
在app根目录执行打包命令
electron-packager . 'HelloWorld' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1
打包成功
打开就可以运行
参考:https://www.cnblogs.com/ljbmvp/p/8437931.html
————————————————
版权声明：本文为CSDN博主「qq_31683775」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_31683775/article/details/102859830
electron中隐藏顶部菜单、隐藏顶部最大化、最小化、关闭按钮以及自定最大化、最小化 、关闭按钮。
哈哈哈哈哈itying
于 2019-11-28 09:49:38 发布
2218
收藏 2
文章标签： electron中隐藏顶部菜单 隐藏顶部最大化、最小化、关闭按钮 electron自定最大化、最小化 、关闭按钮
版权
electron中隐藏顶部菜单、隐藏顶部最大化、最小化、关闭按钮以及自定最大化、最小化 、关闭按钮。
如果您想学Electron视频教程请访问：
【Electron视频教程下载地址】
Electron实战视频教程_Electron-Vue3、Electron-React、Electron-Angular打造舆情监控系统（已完结123讲）_IT营
https://www.itying.com/goods-929.html
1、electron中隐藏顶部菜单
mainWindow.setMenu(null)
2、electron 中隐藏关闭 最大化 最小化按钮
mainWindow = new BrowserWindow({
height: 620,
useContentSize: true,
width: 1280
frame: false /去掉顶部导航 去掉关闭按钮 最大化最小化按钮/
})
3、electron-vue 自定义关闭 最大化 最小化按钮
ipc.on('window-min',function(){
mainWindow.minimize();
})
//登录窗口最大化
ipc.on('window-max',function(){
if(mainWindow.isMaximized()){
mainWindow.restore();
}else{
mainWindow.maximize();
}
})
ipc.on('window-close',function(){
mainWindow.close();
})
4、electron自定义导航可拖拽
可拖拽的css:
-webkit-app-region: drag;
不可拖拽的css:
-webkit-app-region: no-drag;
————————————————
版权声明：本文为CSDN博主「哈哈哈哈哈itying」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/htzhanglong/article/details/81515875
