打包网页的一次尝试

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