将HTML制作成EXE文件的原理主要是将HTML、CSS、JavaScript等前端资源嵌入到一个桌面应用程序中，使得这些资源可以作为一个独立的应用程序运行。通常会用到类似于 Electron 等跨平台框架。这里将为您介绍详细的制作过程。
准备工作：
1. 安装Node.js：请访问[Node.js官方网站](https://nodejs.org)并按照提示安装Node.js，以便我们使用其中的npm包管理器。
2. 初始化项目：在您的HTML项目目录下，通过命令行输入以下内容：
“`bash
npm init -y
“`
此命令会生成一个`package.json`文件，这将允许我们安装和管理所需的依赖项。
3. 安装Electron：仍然在命令行模式，键入以下命令以安装 Electron：
“`bash
npm install electron –save-dev
“`
开始制作：
1. 在项目根目录下创建一个名为`main.js`的文件，Electron将通过此文件来启动您的应用。将以下代码片段添加到`main.js`：
“`javascript
const { app, BrowserWindow } = require(‘electron’);
function createWindow() {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
// 并加载您的index.html文件
win.loadFile(‘index.html’);
}
// 当Electron完成初始化后，调用createWindow方法
app.whenReady().then(createWindow);
// 当所有窗口关闭时，退出应用
app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) app.quit();
});
app.on(‘activate’, () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
“`
2. 在`package.json` 文件中，将”main”属性的值从 “index.js” 更改为 “main.js”。接下来，添加一个名为 “start” 的脚本，使得我们从命令行启动 Electron。您的`package.json`文件应如下所示：
“`json
{
“name”: “your-project-name”,
“version”: “1.0.0”,
“description”: “”,
“main”: “main.js”,
“scripts”: {
“start”: “electron .”
},
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“electron”: “^your-electron-version”
}
}
“`
3. 现在，您可以通过命令行运行以下命令启动 Electron 应用程序：
“`bash
npm start
“`
4. 当您确保Electron应用程序能正常运行后，可以使用Electron Packager或Electron Builder将其打包为EXE文件。首先，安装所需的依赖项：
“`bash
npm install electron-packager –save-dev
“`
接下来，在`package.json`文件中添加一个名为 “package” 的脚本：
“`json
“scripts”: {
“start”: “electron .”,
“package”: “electron-packager . –arch=x64 –platform=win32 –out=release-builds”
},
“`
5. 运行以下命令以将Electron应用程序打包为EXE文件：
“`bash
npm run package
“`
完成上述操作后，您的项目目录中应该会生成一个名为`release-builds`的文件夹，在该文件夹内可以找到生成的EXE文件。
请注意，本教程是一个简化的演示，实际项目可能需要更多的配置、代码优化以及跨平台打包。这些都可以在Electron官方文档中获得更详细的信息。
编辑：清苑，如若转载，请注明出处：https://www.yimenapp.com/kb-yimen/26126/
部分内容来自网络投稿，如有侵权联系立删
