从零开始：如何用Electron将chatgpt-plus.top 打包成EXE文件
你是否曾想过让你的网站脱颖而出，成为一个光鲜亮丽的桌面应用程序？在这个教程中，我们将一步一步地带你实现这个梦想。今天的主角是我们心爱的 https://chatgpt-plus.top/。准备好了吗？让我们开始吧！
准备工作：Node.js和npm
首先，我们需要安装Node.js和npm（Node的包管理工具）。你可以从Node.js官方网站下载并安装它们。安装完毕后，打开命令行，输入以下命令来检查安装是否成功：
node -v npm -v
看到版本号了吗？太棒了，你已经迈出了第一步！
国内镜像加速下载
我们知道，国内的网络环境有时会让人抓狂。因此，我们推荐使用淘宝的npm镜像来加速下载。输入以下命令切换npm源：
npm config set registry https://registry.npmmirror.com/
如果你是个工具控，还可以安装nrm（npm registry manager）来轻松管理多个镜像源：
npm install -g nrm nrm use taobao
初始化你的Electron项目
创建一个新的项目文件夹并初始化npm项目：
mkdir my-electron-app cd my-electron-app npm init -y
安装Electron：
npm install electron --save-dev
创建你的Electron应用
现在，我们要创建一个简单的Electron应用。创建一个名为main.js的文件，并填入以下内容：
const { app, BrowserWindow } = require('electron'); const path = require('path'); function createWindow () { const mainWindow = new BrowserWindow({ width: 800, height: 600, icon: path.join(__dirname, 'icon.ico'), // 指定图标文件路径 webPreferences: { preload: path.join(__dirname, 'preload.js') } }); mainWindow.loadURL('https://chatgpt-plus.top'); // 加载ChatGPT Plus网站 } app.whenReady().then(() => { createWindow(); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); }); app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit(); });
接着，打开package.json文件，确保里面包含以下内容：
"main": "main.js", "scripts": { "start": "electron ." }
运行你的Electron应用
我们来试试运行你的应用，看看它的神奇之处：
npm start
一个漂亮的窗口应该会弹出来，展示你的https://chatgpt-plus.top/网站。如果一切顺利，恭喜你，你离目标又近了一步！
为你的应用设置图标
没有图标的应用是没有灵魂的。准备一个ICO格式的图标文件，命名为icon.ico，并放在项目的根目录。
打包成EXE文件
现在是见证奇迹的时刻了！使用electron-packager来打包你的应用：
npx electron-packager . my-electron-app --platform=win32 --arch=x64 --icon=icon.ico --out=dist --overwrite
几秒钟之后，你会在dist文件夹中找到打包好的EXE文件。双击它，你的桌面应用就会运行起来。是不是很酷？
结语
通过以上步骤，我们成功地将https://chatgpt-plus.top/打包成了一个带有自定义图标的桌面应用程序。这个过程既有趣又令人兴奋。快去炫耀你的新技能吧！
祝你玩得开心，项目顺利！
