使用Electron将HTML单页面打包为exe

最新推荐文章于 2024-05-22 14:25:31 发布

前端小彩笔-

最新推荐文章于 2024-05-22 14:25:31 发布

阅读量1.8k

点赞数 57

文章标签： electron html javascript

本文链接：https://blog.csdn.net/m0_74240916/article/details/137545733

版权

老师让把html搞成exe，不知道有什么用，他说看看起来更高级一些。。
如果你也有类似的老师，可以参考以下步骤进行打包。

食用提示：
首先更新一下你的npm
npm install -g npm@latest

（建议使用npm，我的朋友使用cnpm最后一步总是打包不成功。）

接下来我的朋友就是按照gpt给出的步骤丝滑完成任务的了。

1. 安装Node.js

首先，确保你安装了Node.js。Electron基于Node.js，因此你需要先有Node.js环境。你可以从Node.js官网下载并安装。

2. 初始化新的Electron项目

打开终端（或命令提示符），然后执行以下步骤：

创建一个新的文件夹用于你的项目，并进入该文件夹：
```
mkdir my-electron-app
cd my-electron-app
```
使用npm初始化一个新的Node.js项目：
```
npm init -y
```
安装Electron作为项目的依赖：
```
npm install --save-dev electron
```

3. 创建你的主应用文件

在项目根目录下创建一个名为main.js的文件。这将作为你的主Electron进程的入口点。你可以从Electron的快速入门指南中复制基本的主进程代码，下面是一个简化的实例：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 并且为你的应用加载index.html
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

4. 添加你的HTML文件

在项目根目录下创建一个名为index.html的文件。你可以把你的HTML代码放在这里。

5. 修改你的`package.json`文件

找到package.json文件，修改"main"字段为"main.js"（你的主应用文件名），并添加一个启动脚本：

"main": "main.js",
"scripts": {
  "start": "electron ."
}

6. 运行你的应用

在终端或命令提示符下，运行以下命令：

npm start

这将启动Electron，并加载你的HTML页面。

7. 打包你的应用

为了将你的Electron应用打包成一个EXE文件，你可以使用electron-packager或electron-builder这样的工具。这里以electron-packager为例：

首先，安装electron-packager：

npm install --save-dev electron-packager

执行打包命令：

npx electron-packager . MyElectronApp --platform=win32 --arch=x64

根据你的应用名和目标平台修改上面的命令。这将在项目目录下创建一个MyElectronApp-win32-x64文件夹，里面包含了一个可执行的EXE文件。

记住，根据你的实际需求，你可能还需要配置额外的打包选项，如图标、版本号等。可以在electron-packager的文档中找到更多选项和详细信息。

如果你非要使用cpm，也可以试试踩一下坑：