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

作者: adm 分类: node 发布时间: 2024-05-28

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 -g cnpm --registry=http://registry.npmmirror.com
  cnpm i electron --save-d

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:

cnpm install --save-dev electron-packager

执行打包命令:

(淘宝镜像更新啦: http://npm.taobao.org => http://npmmirror.com)

set ELECTRON_MIRROR=https://cdn.npmmirror.com/dist/electron/
electron-packager . calculator --platform=win32 --arch=x64
npx electron-packager . MyElectronApp --platform=win32 --arch=x64

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

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

使用Electron将HTML页面封装成一个可执行的EXE文件其实是将一个web应用转换成桌面应用的过程。Electron是一个使用JavaScript, HTML和CSS等Web技术创建原生应用程序的框架。它能让你使用纯JavaScript调用丰富的原生(操作系统)APIs创建桌面应用。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!