如何使用 electron 将 web 打包成 exe 桌面程序
首先安装依赖 使用 npm或者 yarn安装
npm i electron@28.1.0 -D
npm i electron-packager@17.1.2 -D
例如 index.html文件如下
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello Worl00d!</h1>
We are usin000g io.js .
</body>
</html>在主文件夹创建一个 index.js文件
const { app } = require("electron");
var BrowserWindow = require("electron").BrowserWindow; // 创建原生浏览器窗口的模块
// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;
// 当所有窗口被关闭了，退出。
app.on("window-all-closed", function () {
// 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
// 应用会保持活动状态
if (process.platform != "darwin") {
app.quit();
}
});
// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on("ready", function () {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({ width: 800, height: 600 });
// 加载应用的 index.html
mainWindow.loadURL("file://" + __dirname + "/index.html");
// 打开开发工具
mainWindow.openDevTools();
// 当 window 被关闭，这个事件会被触发
mainWindow.on("closed", function () {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 但这次不是。
mainWindow = null;
});
});然后把下面脚本命令替换到你的 package.json里面
npm run serve 运行调试
"scripts": {
"serve": "electron .",
"build": "electron-packager ./ app --platform=win32 --arch=x64 --out=dist/"
},npm run build 进行打包
electron-packager ./ app –platform=win32 –arch=x64 –out=dist/
./是需要执行的 electron 代码文件的目录 这里直接同级即可
app是打包后 exe 程序的名字
--platform=win32 --arch=x64是打包的系统详情请 查看官网
--out=dist dist 是打包后的文件夹名称
注意 这里仅是最基础的演示阶段 如果需要更完整的生态以及开发流程 请查看官网 官网
如果想要查看如何打包为一个 exe 可执行文件 请看我上篇文章# electron 打包为 exe 可执行文件
