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或者选择allarch: 可选 ia32, x64, armv7l, arm64或者选择allelectron-version： electron的版本（）out：生成的exe保存目录overwrite:添加此属性在每次打包可以直接覆盖原来的exe文件了。

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

npm run-script packager

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

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

启动成功！