將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官方文檔中獲得更詳細的信息。
