在本教程中，我们主要讨论如何将前端代码 (例如 HTML, CSS 和 JavaScript) 打包成一个独立的可执行文件（.exe）。打包成 .exe 文件的好处是可以直接运行在 Windows 系统上，而无需用户安装浏览器或其他额外软件。以下是讲解的内容：
一、使用的技术
1. Electron
Electron 是由 GitHub 开发的一款开源框架，用于将 web 应用程序转换为跨平台的桌面应用程序。其原理是嵌入了 Chromium 引擎作为 Web 页面渲染引擎，从而实现了将 Web 页面转化为应用程序。
2. Node.js
由于 Electron 构建在 Node.js 之上，因此我们需要先安装 Node.js 来完成以下步骤。如果你还没有安装 Node.js，请访问 https://nodejs.org/ 进行安装。
二、操作步骤
1. 初始化项目
在一个空文件夹中打开命令行窗口 (如，CMD 或 PowerShell)，执行以下命令创建一个新的 Node.js 项目：
```
npm init
```
按照提示输入项目名称、版本、描述等信息，然后确认生成 `package.json` 文件。
2. 安装 Electron
使用以下命令安装 Electron：
```
npm install electron --save
```
3. 创建主文件和前端文件
在项目根目录下创建一个名为 `main.js` 的文件，这将是 Electron 应用程序的主入口。同时创建一个名为 `index.html` 的文件，用于存放前端代码。可在 `index.html` 中编写 HTML、CSS 和 JavaScript 等前端代码。
4. 编写主文件代码
打开 `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.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
```
此代码定义了一个 Electron 应用程序窗口并加载 `index.html` 文件。
5. 更改项目入口
在 `package.json` 文件中，将 `main` 字段的值改为 `main.js`。并添加一条 `start` 脚本来启动 Electron，如下所示：
```json
{
"name": "your-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"dependencies": {
"electron": "^9.0.0"
}
}
```
6. 测试项目
运行以下命令查看效果：
```
npm start
```
一个 Electron 窗口应该会打开，显示 `index.html` 文件中的内容。
7. 打包 EXE 文件
安装 electron-builder：
```
npm install electron-builder --save-dev
```
更新 `package.json` 文件，添加以下配置：
```json
{
"build": {
"appId": "your-app-name",
"win": {
"target": ["nsis"]
},
"nsis": {
"oneClick": false,
"perMachine": false,
"allowToChangeInstallationDirectory": true
},
"extraResources": [
"path/to/your/resource.xlsx"
]
},
"scripts": {
"build": "electron-builder"
}
}
```
运行以下命令：
```
npm run build
```
打包后，可在 `dist` 文件夹下找到 `.exe` 文件。
现在，你已经将前端代码打包成 .exe 文件！用户可以直接在 Windows 系统上安装并运行你的应用程序，无需其他依赖。
