打包网页的一次尝试

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