H5 APPH5页面打包成EXE可执行文件的主要原理是将HTML、CSS、JavaScript等网页资源嵌入到一个应用程序中，使其能够独立运行于操作系统。在这个过程中，通常会用到一些工具或框架。本文主要讲解两种常见的H5页面打包成EXE的方法，分别是：NW.js和Electron。先给出简述，再详细介绍每个方案。
简述：
1. NW.js：在对HTML、CSS、JavaScript等资源进行封装时采用Chrome浏览器内核来渲染和执行这些网页文件。
2. Electron：基于Node.js和Chromium的跨平台框架，提供了丰富的原生系统API供开发者调用。
1. 使用NW.js打包H5页面
怎么自己制作exe软件NW.js（之前叫做Node-Webkit）是一个基于Chromium浏览器内核和Node.js运行环境的开源框架，可用于开发跨平台的桌面应用，将H5页面打包成EXE文件。
详细操作步骤如下：
1.1. 下载NW.js
访问NW.js官方网站（https://nwjs.io/）下载适合的版本（Windows、Mac或Linux）。解压缩后，保留文件夹。
1.2. 创建H5项目文件夹
创建一个新文件夹（例如：my-h5-app），将HTML、CSS、JavaScript等网页资源文件添加到该文件夹中。
1.3. 创建package.json配置文件
在my-h5-app文件夹中创建名为package.json的文件，用于描述应用信息。例如：
“`json
{
“name”: “my-h5-app”,
“version”: “1.0.0”,
“main”: “index.html”, // 指定入口HTML文件
“scripts”: {
“start”: “nw .”
},
“dependencies”: {},
“window”: {
“title”: “My H5 App”,
“width”: 800,
“height”: 600
}
}
“`
1.4. 路径调整
将解压缩后的NW.js文件夹放到my-h5-app文件夹中。
1.5. 打包成EXE可执行文件
打开NW.js文件夹，将my-h5-app文件夹拖放到nw.exe上，就可以生成一个独立运行的桌面应用。将exe文件及相关文件打包到一起，即可作为可执行程序。
2. 使用Electron打包H5页面
Electron（https://www.electronjs.org/）是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的开源框架。
详细操作步骤如下：
2.1. 环境准备
确保安装了Node.js、npm，并通过命令行全局安装Electron：
“`cmd
npm install -g electron
“`
2.2. 创建新的H5项目文件夹
创建一个新文件夹（例如：my-electron-app），在该文件夹中初始化一个新的Node.js项目：
“`cmd
npm init -y
“`
2.3. 添加H5页面资源
将HTML、CSS、JavaScript等文件放入my-electron-app文件夹。
2.4. 安装Electron包
在my-electron-app文件夹中，通过命令行安装Electron：
“`cmd
npm install electron –save
“`
2.5. 创建主进程文件
在my-electron-app文件夹中创建一个名为main.js的文件，用于编写主进程代码。
加入以下示例代码：
“`javascript
const { app, BrowserWindow } = require(‘electron’);
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadFile(‘index.html’);
}
app.on(‘ready’, createWindow);
“`
2.6. 更新package.json
修改my-electron-app文件夹中的package.json文件：
“`json
{
“name”: “my-electron-app”,
“version”: “1.0.0”,
“description”: “”,
“main”: “main.js”,
“scripts”: {
/* 新增以下行 */
“start”: “electron .”
},
“dependencies”: {
“electron”: “^VERSION”
}
}
“`
2.7. 运行及打包
在如何将vue程序打包成exe命令行中运行 `npm start` 运行H5应用；
为生成EXE文件，将Electron打包成不同平台的可执行程序。推荐使用 elec
tron-packager（https://github.com/electron/electron-packager）。安装并打包应用即可。
总结：上述两种方法都能将H5页面打包成EXE可执行文件，开发者可根据需求自行选择。
