在本教程中，我将向您展示如何将前端项目打包成为可执行文件（.exe）。这在多种情况下都很有用，例如：需要在没有服务器认证的系统上运行前端项目，可以将前端项目打包为一个独立的可执行文件，使用户无需安装任何附加软件即可轻松访问该项目。以下是该过程的步骤和相关操作：
需要的软件和工具:
1. Node.js：后端运行时环境，用于执行JavaScript。
2. npm：Node.js的包管理器，用于安装和管理项目所需的库和框架。
3. Electron：一个框架，用于将网页应用打包成跨平台桌面应用程序。
步骤1：安装Node.js 和 npm
前往Node.js官方网站（https://nodejs.org/）下载并安装相应版本，安装过程中npm将一并安装。
步骤2：创建一个新的前端项目（如有现有项目请跳过该步骤）
使用 npm 的 create-react-app 命令断创建一个新项目，例如:
```
npx create-react-app myapp
```
其中，将“myapp”替换为您想要的应用名称。这将创建包含了基本React前端项目的文件夹。
步骤3：进入项目文件夹
使用命令行进入项目文件夹。例如：
```
cd myapp
```
步骤4：安装Electron
在项目文件夹中，通过以下命令安装Electron:
```
npm install electron --save-dev
```
这将安装Electron开发依赖。
步骤5：创建主Electron文件
在项目根目录中创建一个名为“electron.js”的新文件。该文件将包含配置Electron的代码。将以下内容复制到文件中：
```javascript
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1280,
height: 720,
webPreferences: {
nodeIntegration: true,
},
});
const startURL =
process.env.ELECTRON_START_URL ||
url.format({
pathname: path.join(__dirname, "../build/index.html"),
protocol: "file:",
slashes: true,
});
mainWindow.loadURL(startURL);
mainWindow.once("ready-to-show", () => {
mainWindow.show();
});
mainWindow.on("closed", () => {
mainWindow = null;
});
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (mainWindow === null) {
createWindow();
}
});
```
步骤6：配置 package.json
您需要在项目的 `package.json` 文件中添加 Electron 配置。首先，添加一个“main”属性（通常在“name”与“version”属性之间），设置为您刚创建的electon.js文件：
```json
"main": "electron.js",
```
接着，在“scripts”部分添加一个新的名为“electron”的脚本。 最后，添加 “homepage” 属性设置为 "."。修改后的 "scripts" 和 "homepage" 配置如下：
```json
"scripts": {
…
"electron": "electron ."
},
"homepage": ".",
```
步骤7：打包前端项目
在项目目录中，运行以下命令以构建前端项目：
```
npm run build
```
这将创建一个包含已编译的前端项目的“build”文件夹。
步骤8：启动Electron桌面应用
使用以下命令启动 Electron 桌面应用程序：
```
npm run electron
```
此时，您将看到一个包含前端项目的桌面窗口。
步骤9：打包为可执行文件
经过以上步骤，简单地将代码打包成可执行文件（.exe），使用称为 electron-builder 的库。 首先安装依赖项：
```
npm install electron-builder --save-dev
```
然后，在项目的 `package.json` 文件中，将以下内容添加到 “scripts” 部分：
```json
"dist": "electron-builder"
```
还需要在 package.json 的文件中添加 "build" 配置，指定打包选项和图标。可以插入如下配置：
```json
"build": {
"appId": "com.example.myapp",
"productName": "My App",
"directories": {
"buildResources": "resources"
},
"win": {
"icon": "public/favicon.ico"
}
}
```
接下来，运行以下命令以打包应用程序：
```
npm run dist
```
这将在项目根目录中生成一个名为“dist”的文件夹，其中包含了针对Windows操作系统的可执行文件。您可以将此文件分发给用户，并在不安装任何服务器的情况下直接运行，享受到原生应用的体验。
在本教程中，我们介绍了如何将前端项目打包为可执行文件（.exe），以简化应用程序的部署和运行。虽然这里使用的是基于React的前端应用，但您可以根据需要使用其他前端框架进行操作，步骤大致相同。
