h5怎么打包exe

将H5应用打包成EXE文件的方式主要有两种方法，一种是借助Electron框架，另一种是使用NW.js。下面分别为大家详细介绍这两种方法的操作步骤和关键原理。

方法一： Electron

1. 安装 Node.js

首先，要将H5应用打包成EXE文件，你需要安装Node.js环境。访问Node.js的官网(https://nodejs.org/) 下载并安装合适的版本。

2. 创建项目文件夹

创建一个新的文件夹，用于存放项目文件。例如，创建一个名为“h5-to-exe”的文件夹，并将你的H5应用文件复制到该文件夹中。

3. 初始化项目

在项目文件夹中打开命令提示符(按住shift，然后右键点击文件夹空白处选择“在此处打开命令窗口”)，输入以下命令：

```

npm init

```

按照提示完成package.json文件的生成。

4. 安装Electron

使用以下命令安装electron：

```

npm install electron --save-dev

```

5. 创建主文件

在项目文件夹中创建一个名为“main.js”的文件，并添加以下内容：

```javascript

const { app, BrowserWindow } = require("electron");

function createWindow() {

const win = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

nodeIntegration: true

}

});

// 加载你的H5应用的index.html

win.loadFile("index.html");

}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {

if (process.platform !== "darwin") {

app.quit();

}

});

app.on("activate", () => {

if (BrowserWindow.getAllWindows().length === 0) {

createWindow();

}

});

```

6. 修改package.json文件

在package.json文件中的"scripts"部分添加以下内容：

```json

"start": "electron ."

```

7. 测试

在命令提示符窗口执行以下命令测试：

```

npm start

```

8. 打包EXE文件

安装electron-builder：

```

npm install electron-builder --save-dev

```

修改package.json文件，添加以下内容：

```json

"build": {

"appId": "your.app.id",

"productName": "YourAppName",

"win": {

"target": "nsis"

},

"nsis": {

"oneClick": false,

"allowElevation": true,

"allowToChangeInstallationDirectory": true,

"installerIcon": "path/to/your/icon.ico",

"uninstallerIcon": "path/to/your/icon.ico",

"installerHeaderIcon": "path/to/your/icon.ico",

"createDesktopShortcut": true,

"createStartMenuShortcut": true,

"shortcutName": "YourAppName"

}

}

```

运行以下命令进行打包：

```bash

npm run-script build

```

完成上述步骤后，在项目文件夹的“dist”目录中，你将找到生成的EXE文件。

方法二： NW.js

1. 安装 Node.js

同样需要先安装Node.js环境。

2. 创建项目文件夹

与方法一类似地创建项目目录。

3. 初始化项目

运行`npm init`，初始化项目。

4. 安装NW.js

使用以下命令安装nw：

```

npm install nw --save-dev

```

5. 编写package.json文件

将你的H5应用的主页面（如`index.html`）作为"main"字段的值。

```json

{

"name": "h5-to-exe",

"version": "1.0.0",

"main": "index.html",

"scripts": {

"start": "nw"

},

}

```

6. 测试

运行以下命令进行测试：

```

npm start

```

7. 打包EXE文件

安装nw-builder：

```

npm install nw-builder --save-dev

```

修改package.json文件，添加以下内容：

```json

"scripts": {

"build": "nwbuild --platforms win64 --buildDir dist ./"

},

"buildDependencies": {

"winIco": "path/to/your/app/icon.ico"

}

```

运行以下命令进行打包：

```bash

npm run build

```

完成上述步骤后，在项目文件夹的“dist”目录中，你将找到生成的EXE文件。

综上所述，使用Electron或NW.js框架，我们可以轻松将H5应用打包成EXE文件。这两种方法的原理都是将H5应用嵌入到一个基于Chromium浏览器的本地应用程序窗口中，从而使H5应用脱离浏览器环境独立运行。