当我们谈论制作EXE边框时，我们实际上是在谈论如何使用编程或脚本语言为桌面应用程序创建用户界面（UI）边框。EXE文件是Windows可执行文件的扩展名，通常用于运行程序或安装软件。在这篇文章中，我们将重点了解如何在Windows系统中创建具有边框的可执行
2023-04-27
中文化、本土化、云端化的在线跨平台软件开发工具，支持APP、电脑端、小程序、IOS免签等等
将前端html打包成exe的目的是为了让用户可以在没有安装浏览器的情况下直接运行html应用程序。在介绍打包的方法之前，我们需要了解一下打包的原理。
打包原理
将前端html文件打包成exe的过程，其实是将浏览器和html文件打包在一起，形成一个可执行文件。这个可执行文件包含了一个轻量级的浏览器内核，它可以在没有安装浏览器的情况下运行html应用程序。
打包方法
下面介绍两种常用的打包方法：
1.使用Electron
Electron是一个基于Node.js和Chromium的框架，可以将前端html文件打包成桌面应用程序。它提供了丰富的API，可以让你的应用程序具有更多的功能，如文件系统、系统通知、窗口管理等等。
使用Electron打包前端html文件的步骤如下：
1）安装Electron
在命令行中执行以下命令，安装Electron：
```
npm install electron --save-dev
```
2）创建main.js文件
在项目根目录下创建一个main.js文件，用于启动Electron：
```
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
```
3）打包应用程序
在命令行中执行以下命令，打包应用程序：
```
electron-packager . MyApp --platform=win32 --arch=x64
```
其中，.表示当前目录，MyApp表示应用程序的名称，--platform=win32表示打包成Windows平台的应用程序，--arch=x64表示打包成64位的应用程序。
打包完成后，在项目根目录下会生成一个MyApp-win32-x64文件夹，其中包含了可执行文件和相关的资源文件。
2.使用NW.js
NW.js是一个基于Chromium和Node.js的框架，可以将前端html文件打包成桌面应用程序。它也提供了丰富的API，可以让你的应用程序具有更多的功能。
使用NW.js打包前端html文件的步骤如下：
1）安装NW.js
在命令行中执行以下命令，安装NW.js：
```
npm install nw --save-dev
```
2）创建package.json文件
在项目根目录下创建一个package.json文件，用于配置应用程序的信息：
```
{
"name": "MyApp",
"version": "1.0.0",
"main": "index.html",
"window": {
"width": 800,
"height": 600
}
}
```
其中，name表示应用程序的名称，version表示应用程序的版本号，main表示应用程序的入口文件，window表示应用程序的窗口大小。
3）打包应用程序
在命令行中执行以下命令，打包应用程序：
```
nw .
```
其中，.表示当前目录。
打包完成后，在项目根目录下会生成一个MyApp文件夹，其中包含了可执行文件和相关的资源文件。
总结
将前端html文件打包成exe可以让用户在没有安装浏览器的情况下直接运行html应用程序。目前常用的打包方法有Electron和NW.js，它们都提供了丰富的API，可以让你的应用程序具有更多的功能。在使用时，需要根据自己的需求选择合适的打包方法。
