打包Electron工程(前端的GUI)

为了让别人双击运行项目不用对方安装node的麻烦,即可以打包成可执行文件。

为了简化Electron程序运行环境,可以把工程编译成EXE可执行程序(windows)或者编译成DMG文件(macos)。


安装打包工具:

先安装electron-packager工具:

cnpm install -g electron-packager

查看Electron版本号:

编译Electron项目的时候,必须要提供本地的Electron版本号

electron --version

编译成EXE程序:

electron-packager . <编译后的文件的名字> --win --out <编译后的目录名下> --arch=x64 --electron-version <刚刚查询的版本号> --overwrite --ignore=node_modules



arch是cpu的架构
overwrite 代表覆盖输出目录的文件
ignore=node_modules代表忽略nodejs程序包,项目编译成exe程序,所以就不需要用到nodejs环境了

Electron 可以将前端项目打包成桌面应用程序,具体步骤如下: 1. 配置 package.json 文件 在 package.json 文件中添加以下内容: ``` "main": "main.js", "scripts": { "start": "electron ." }, "dependencies": { "electron": "^10.1.1" } ``` 其中,`main` 指定 Electron 主进程的入口文件,`scripts` 中的 `start` 命令用于启动应用程序,`dependencies` 中指定 Electron 的版本。 2. 创建主进程入口文件 在项目根目录下创建 `main.js` 文件,作为 Electron 主进程的入口文件。在 `main.js` 文件中,可以通过 `BrowserWindow` 类创建一个窗口,并加载前端项目的入口页面。 ```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() }) ``` 在上述代码中,通过 `BrowserWindow` 类创建了一个窗口,并使用 `loadFile` 方法加载了前端项目的入口页面 `index.html`。 3. 打包应用程序 使用以下命令打包应用程序: ``` electron-packager . MyApp --platform=<platform> --arch=<arch> ``` 其中,`MyApp` 是应用程序的名称,`<platform>` 可以是 `darwin`、`linux` 或 `win32`,表示打包的目标平台,`<arch>` 可以是 `ia32`、`x64` 或 `armv7l`,表示打包的目标架构。打包完成后,会在项目根目录下生成一个与目标平台和架构相关的文件夹,包含了打包后的应用程序。 以上就是使用 Electron前端项目打包的基本步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

醒不了的星期八

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值