ToB企服应用市场:ToB评测及商务社交产业平台

标题: 如何用 Electron 打包chatgpt-plus.top并天生mac客户端 [打印本页]

---

作者: 北冰洋以北    时间: 2024-6-14 22:45
标题: 如何用 Electron 打包chatgpt-plus.top并天生mac客户端
如何用 Electron 打包chatgpt-plus.top并天生 DMG：一步步搞定！

嘿，各位开发者朋侪们！你有没有碰到过这样的问题？你辛辛苦苦开发了一个超酷的 Electron 应用，想要打包成 macOS 的 DMG 文件，结果碰到各种神秘的错误提示？不用担心，我也是从这个坑里爬出来的！本日我就带你用幽默的方式，一步步搞定这个难题。
预备工作：Node.js 和 npm

首先，我们需要安装 Node.js 和 npm（Node 的包管理工具）。你可以从 Node.js 官方网站下载并安装它们。安装完毕后，打开下令行，输入以下下令来检查安装是否成功：

1. node -v
2. npm -v

复制代码

看到版本号了吗？太棒了，你已经迈出了第一步！
国内镜像加速下载

我们知道，国内的网络情况偶然会让人抓狂。因此，我们推荐利用淘宝的 npm 镜像来加速下载。输入以下下令切换 npm 源：

1. npm config set registry https://registry.npmmirror.com/

复制代码

假如你是个工具控，还可以安装 nrm（npm registry manager）来轻松管理多个镜像源：

1. npm install -g nrm
2. nrm use taobao

复制代码

初始化你的 Electron 项目

创建一个新的项目文件夹并初始化 npm 项目：

1. mkdir my-electron-app
2. cd my-electron-app
3. npm init -y

复制代码

安装 Electron：

1. npm install electron --save-dev

复制代码

创建你的 Electron 应用

现在，我们要创建一个简单的 Electron 应用。创建一个名为 main.js 的文件，并填入以下内容：

1. const { app, BrowserWindow } = require('electron');
2. const path = require('path');
4. function createWindow() {
5.   const mainWindow = new BrowserWindow({
6.     width: 800,
7.     height: 600,
8.     icon: path.join(__dirname, 'icon.ico'), // 指定图标文件路径
9.     webPreferences: {
10.       preload: path.join(__dirname, 'preload.js')
11.     }
12.   });
14.   mainWindow.loadURL('https://chatgpt-plus.top'); // 加载 ChatGPT Plus 网站
15. }
17. app.whenReady().then(() => {
18.   createWindow();
20.   app.on('activate', () => {
21.     if (BrowserWindow.getAllWindows().length === 0) createWindow();
22.   });
23. });
25. app.on('window-all-closed', () => {
26.   if (process.platform !== 'darwin') app.quit();
27. });

复制代码

接着，打开 package.json 文件，确保内里包罗以下内容：

1. "main": "main.js",
2. "scripts": {
3.   "start": "electron ."
4. }

复制代码

运行你的 Electron 应用

我们来试试运行你的应用，看看它的神奇之处：

1. npm start

复制代码

打包你的 Electron 应用

首先，用下面这条神奇的下令打包你的应用：

1. npx electron-packager . my-electron-app --platform=darwin --arch=x64 --icon=icon.icns --out=dist --overwrite

复制代码

假如一切顺遂，你会在 dist 目次下看到一个名为 my-electron-app-darwin-x64 的文件夹，内里有一个 .app 文件。没错，这就是你闪亮登场的应用启动程序！

处置处罚网络超时问题

当然了，事情总不会那么顺遂。假如你看到一个雷同这样的错误信息：

1. connect ETIMEDOUT 185.199.109.133:443

复制代码

别急，别急！这是网络超时问题，可以用以下几招来办理：

• 检查你的网络毗连：确保你能愉快地刷网页。
  
• 重试下令：偶然候，命运只是在考验你的耐烦。
  
• 换个网络：假如可以，试试隔壁邻居家的 Wi-Fi（开顽笑啦，用自己的网络哈）。
  
• 配置署理：假如你在公司防火墙后面，记得设置署理：
  
  1. export HTTP_PROXY=http://你的代理服务器:端口
  2. export HTTPS_PROXY=http://你的代理服务器:端口

  复制代码
• 增长超时时间：给你的下令多一点时间思索人生：
  
  1. export ELECTRON_GET_TIMEOUT=100000

  复制代码
• 检查防火墙设置：确保防火墙没有在背后搞小动作。
  
• 更新工具：偶然候老版本的软件就是不听话，更新一下 npm 和 electron-packager 吧：
  
  1. npm install -g npm
  2. npm install -g electron-packager

  复制代码
• 手动下载：假如全部方法都不可，手动下载 Electron 的二进制文件并放到精确的目次中。
  

将 .app 文件打包成 DMG

恭喜你！假如你已经看到那个熟悉的 .app 文件，现在只需要再来点小邪术，就能天生一个漂亮的 DMG 文件了。首先，安装 electron-installer-dmg：

1. npm install -g electron-installer-dmg

复制代码

然后，用下面这条下令进行打包：

1. electron-installer-dmg dist/my-electron-app-darwin-x64/my-electron-app.app my-electron-app

复制代码

几秒钟之后，你会看到一个 my-electron-app.dmg 文件，拿去分发给你的 macOS 用户吧！
末了

搞定！现在你不但成功地打包了你的 Electron 应用，还可以自豪地跟朋侪们吹嘘你在技能上的突破。希望这篇幽默的小教程能帮你顺遂度过这个坑。祝你开发愉快，bug 少少！
假如碰到任何问题，接待留言，我们一起哈哈大笑，共同办理！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4