Electron打包Web程序，部署web端桌面程序（很简单！）

背景：

** **闲来无事，玩了一下Web程序桌面端打包。感觉挺好玩，随手记录下。

1、安装node环境，node官网 Node.js — Run JavaScript Everywhere (nodejs.org)

Win + R， 调出来cmd命令窗口，输入

node -v

下图返回版本号，证明安装node成功。

没有成功的友友可以看下面这篇文章。

Node.js下载安装及环境配置教程【超详细】_nodejs下载-CSDN博客

2、新建一个文件夹名为test，打开终端或者cmd命令窗口，使用npm init -y 初始化一个package.json文件。

npm init -y

新生成的文件内容如下。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

对内容做如下修改

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // "test": "echo \"Error: no test specified\" && exit 1"  //修改前
    "start": "electron ." //修改后
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
​

3、安装electron

npm install electron --save-dev --verbose

安装完成后，文件内容如下：

4、将自己的web项目（名为webApp）放到test文件夹中。我的web项目是html、css、js三件套写的。如下。

5、新建一个js入口文件，名为index.js。 注意：要与 package.json文件中的 main属性对应的文件名相同！。

    根据你的文件路径，进行适当修改（注：下列代码icon属性和pathname属性对应的路径，均替换为你的web项目对应的图标和html路径）

const electron = require('electron');
const app = electron.app;
const path = require('path');
const url = require('url');
const BrowserWindow = electron.BrowserWindow;
//创建主窗口
app.on('ready', function() {
    // 创建窗口
    mainWindow = new BrowserWindow({
        minimizable: true,//最小化
        maximizable: true,//最大化
        closable: true,
        movable: true,
        frame: true,//边框
    fullscreen: false,//全屏
    titleBarStyle: 'hidden',
    autoHideMenuBar: true,
    //图标
    icon: path.join(__dirname, '/webApp/icon.png')
  });
  // 最大化窗口
  mainWindow.maximize();
    // 载入应用的index.html
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, '/webApp/index.html'),
        protocol: 'file:',
        slashes: true
  }));
    // 窗口关闭时触发
    mainWindow.on('closed', function() {
        // 想要取消窗口对象的引用， 如果你的应用支持多窗口，你需要将所有的窗口对象存储到一个数组中，然后在这里删除想对应的元素
        mainWindow = null
  });
});

6、安装electron打包工具

npm install electron-packager -g

7、上述安装完成后，打开之前的package.json文件，在scripts中添加如下代码

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    //下面这行
    "packager":"electron-packager ./ ISCS --platform=win32 --arch=x64 --electron-version=1.8.4 --out --overwrite" //新增
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^29.1.5"
  }
}
​

    每一个属性说明：

./表示当前路径
ISCS ：exe应用的名称
platform: 打包平台 darwin, linux, mas, win32或者选择all
arch: 可选 ia32, x64, armv7l, arm64或者选择all
electron-version： electron的版本（）
out：生成的exe保存目录
overwrite:添加此属性在每次打包可以直接覆盖原来的exe文件了。

8、运行如下命令进行打包。

npm run-script packager

打包后，生成下图文件ISCS-win32-x64。

找到对应的exe文件，运行即可。

启动成功！