需求： 将一个已经上线的后台管理系统（只兼容Chrome）打包成一个不需要谷歌浏览器就可以运行的软件
需要安装：
npm install electron -g
npm install electron-packager -g
WinRAR解压工具（或者2345等其他解压工具也可以）
Powershell 3 或 3 以上版本（electron-packager打包需要）
NET 4.5 或 4.5 以上版本（electron-packager打包需要）
此例只进行最简单的转换，详细electron用法请参考electron中文文档
运行文件
新建文件夹，演示中暂命名为app，在文件夹中启动cmd,创建package.json，在package.json中必须有写入
{
"name": "app",
"main": "main.js",
}
在app文件夹中创建main.js文件，在文件中写入以下内容
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
// 保持一个对于 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
mainWindow.loadURL("http://www.baidu.com")
// 打开开发工具
// mainWindow.openDevTools();
// 当 window 被关闭，这个事件会被发出
mainWindow.on('closed', function () {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 但这次不是。
mainWindow = null;
});
});
如果安装了上边说的 npm install electron -g，就可以直接在命令窗口运行electron .,打开窗口了
导出文件
在app文件夹下，安装
npm install electron -D
npm install electron-package -D
安装后，在命令行输入 `electron-packager . app --win --out ./appBox --arch=x64 --version1.0.0 --icon=ico.ico --overwrite --ignore=node_modules`
这句命令的意思是electron-packager .exe文件名称--win --out ./文件夹名称--arch=64位--version版本号--icon=打包后文件的图标--每次调用覆盖文件--ignore=不打包的内容
可以按照个人需求适当删除内容
注意： electron-packager必须安装Powershell3或3以上版本和NET4.5或4.5以上版本，否则会报错
如果希望打开内容不是一个URL而是一个index.html的本地文件的话，可以使用
// 把
mainWindow.loadURL("http://www.baidu.com")
// 替换为
mainWindowloadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
然后在app文件夹中创建index.html就可以了
如果需要打开后全屏显示
// 把
mainWindow = new BrowserWindow({ width: 800, height: 600 });
// 替换为
mainWindow = new BrowserWindow({width: 800, height: 600, autoHideMenuBar: true})
打包完成后，打开文件夹中的app.exe就可以运行了
以上就是“使用electron 将网页打包成应用程序”的详细内容，更多请关注木子天禾科技其它相关文章！
