1. 下载Node.js
更换cnpm:npm install -g cnpm --registry=https://registry.npmmirror.com
在C:\Users\Administrator\.npmrc
中添加源
registry=https://registry.npmmirror.com
disturl=https://registry.npmmirror.com/-/binary/node
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
2. 下载electron
cnpm install electron -g
3. 下载electron-builder
cnpm install electron-builder -g
4. 编辑文件
创建文件夹并进入,然后别编写以下文件package.json
,main.js
package.json
{
"name": "envProtection",
"version": "1.0.0",
"description": "环保智慧化管理系统",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"pack": "electron-builder"
},
"author": "jmld",
"license": "ISC",
"devDependencies": {
"electron": "^32.1.2",
"electron-builder": "^23.3.3"
},
"build": {
"appId": "com.example.envProtection",
"productName": "环保智慧化管理系统",
"directories": {
"output": "dist"
},
"files": [
"!node_modules",
"!dist",
"!build"
],
"win": {
"target": "nsis",
"icon": "envprotection.ico"
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true
},
"electronDownload": {
"mirror": "https://npm.taobao.org/mirrors/electron/"
}
}
}
main.js
const electron = require('electron');
const Menu = electron.Menu
// 控制应用生命周期的模块
const {app} = electron;
// 创建本地浏览器窗口的模块
const {BrowserWindow} = electron;
// 指向窗口对象的一个全局引用,如果没有这个引用,那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;
function createWindow() {
// 隐藏菜单栏
//Menu.setApplicationMenu(null);
// 创建一个新的浏览器窗口
win = new BrowserWindow({width: 1366, height: 768, show: false});
win.setAutoHideMenuBar(true);
// 并且装载应用的index.html页面
win.loadURL(`http://www.kmhzhxt.com/`);
// 打开开发工具页面
//win.webContents.openDevTools();
// 当窗口关闭时调用的方法
win.on('closed', () => {
// 解除窗口对象的引用,通常而言如果应用支持多个窗口的话,你会在一个数组里
// 存放窗口对象,在窗口关闭的时候应当删除相应的元素。
win = null;
});
// 加载完成后弹出登录框
win.once('ready-to-show', () => {
win.setTitle("环保智慧化管理系统");
win.show();
});
}
// 当Electron完成初始化并且已经创建了浏览器窗口,则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
}); */
// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', () => {
// 对于OS X系统,应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 对于OS X系统,当dock图标被点击后会重新创建一个app窗口,并且不会有其他
// 窗口打开
if (win === null) {
createWindow();
}
});
// 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。
// 也可以把这些代码放在另一个文件中然后在这里导入。
5. 打包
在上一步自建目录下配置依赖:cnpm install electron -D
全局安装打包工具:cnpm install electron-builder --save-dev -g
打包:cnpm run pack
最后在自建目录下dist
下就可以看见打包好的.exe文件了
参考链接:
记一次使用 Electron 打包在线网页
下载链接:
Node.js官方
Electron主页
electron官方镜像
electron官方Demo
参考链接:
npmmirror 镜像站
https://blog.csdn.net/h__913246828/article/details/136362415
electron和node.js的版本兼容情况:https://www.npmjs.com/package/electron-releases