使用Electron将HTML项目打包为桌面应用（exe）

基础环境需要安装node.js和npm

1）进入需要打包的项目文件夹中，打开cmd进入该目录

2）npm init 

 之后会多出一个package.json文件，以下是默认内容

{
  "name": "exe",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"start":"electron ."
  },
  "author": "bright2017",
  "license": "ISC"
}

3）在根目录新建main.js，下面是默认内容

const { app, BrowserWindow } = require('electron')
  function createWindow () {   
// 创建浏览器窗口
const win = new BrowserWindow({
 width: 800,
 height: 600,
 webPreferences: {
   nodeIntegration: true
 }
})
// 并且为你的应用加载index.html
win.loadFile('index.html')

// 打开开发者工具
win.webContents.openDevTools()

 }
 

 // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
 // 部分 API 在 ready 事件触发后才能使用。
 app.whenReady().then(createWindow)

 //当所有窗口都被关闭后退出
 app.on('window-all-closed', () => {
 // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
 // 否则绝大部分应用及其菜单栏会保持**。
 if (process.platform !== 'darwin') {
     app.quit()
 }
 })

 app.on('activate', () => {
 // 在macOS上，当单击dock图标并且没有其他窗口打开时，
 // 通常在应用程序中重新创建一个窗口。
 if (BrowserWindow.getAllWindows().length === 0) {
     createWindow()
 }
 })
 

4）开始安装 electron

npm install --save-dev electron

5）需要测试则执行 

npm start

6）直接打包需要安装 electron-packager

npm install electron-packager -g

7）安装成功后执行打包命令 

electron-packager . <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>

electron-packager . exe --win --out ../exe --arch=x64 --electron-version=10.1.0 

因为命令太长，每次打包都要输入太麻烦，所以可以写入 package.json中

{
  "name": "exe",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"start":"electron .",
	"package": "electron-packager . exe --win --out ../exe --arch=x64 --electron-version=10.1.0"
  },
  "author": "bright2017",
  "license": "ISC"
}

但是npm下载太慢了，所以可以直接下载压缩包，执行命令时指定路径即可

8）在根目录新建文件夹 命名为 electron-zip ，将下载好的压缩包放进去

下载压缩包网址 ：https://npm.taobao.org/mirrors/electron

exe是我的项目目录，我下载的是10.1.0版本  

下载好后，不用解压，直接放进去，更改package的执行命令即可

{
  "name": "exe",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"start":"electron .",
	"package": "electron-packager . exe --win --out ../exe --arch=x64 --electron-version=10.1.0 --overwrite --ignore=node_modules --electron-zip-dir=./electron-zip"
  },
  "author": "bright2017",
  "license": "ISC"
}

命令行中直接运行命令  npm run-script package

最终生成结果，双击运行即可。