node.js配合electron打包成为安装包

最近在忙别的事情,好久不出一期博客了,网上有很多的electron打包成为桌面软件的教程,那这一期我出一期打包成安装包的教程

---

前言

提示：这一篇就浅浅的教大家如何把chatgpt配合electron框架打包成为客户端

在之前学习到electron框架的时候总是想着如何才能把它打包成安装包让别人安装,可以实时让自己写好的软件在别人的电脑桌面端能用,但是网上找了好久也没翻出来,最后配合chatgpt,翻文档才得以解决,所以今天记录一下我是怎们做到的吧.

---

一、electron是什么？

介绍：我的简单理解就是将网页端的内容转成桌面端,可以实现快速使用

二、使用步骤

1.1 首先先初始化一个node.js工程

npm init -y

 1.2 导入electron库

npm install --save-dev electron    这里一定要使用--save-dev的方式安装要不然会和接下来的安装包打包变得冲突

 1.3 准备好一个主进程文件

这里面你需要看你的node.js项目中的package.JSON文件里面的main是不是指向index.js

如果不是请自行修改一下

 1.4 接下来往index.js中写入代码

//导入所需要的模块
const { BrowserWindow, app, Menu } = require("electron");
// 控制应用程序的事件生命周期。// 当 Electron 完成初始化时，触发一次
app.whenReady().then(() => {//创建一个electron项目的窗口const mainWindow = new BrowserWindow({//窗口的长度和高度width: 1200,height: 800,
//打包成为的安装包的logo
icon: "./icon.png",});//这里写一个自定义菜单栏,chatgpt用的时候老是卡住,所以做了一个刷新效果const template = [{label: "刷新页面",click: async () => {// 调用 `reload` 方法刷新当前页面const webContents = BrowserWindow.getFocusedWindow().webContents;webContents.reload();},},];//这里就是将自己写好的菜单栏给放到菜单栏该有的位置const senu = Menu.buildFromTemplate(template);Menu.setApplicationMenu(senu);//调用loadURL方法,让其加载到chatgpt的首页mainWindow.loadURL("https://chat.openai.com/chat");
});

1. 5 安装打包模块（一定要按照下面给的安装命令安装）

npm install --save-dev electron-builder 

安装node.js打包命令

npm install packager 

顺便安装了node.js的内置模块fs,和path

npm install fs 

npm install path 

npm install build

以上模块请记得一定要安装

 1.6 接下来配置package.json的scripts里面的启动命令

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "electron .","build": "electron-builder"},

现在的配置文件应该是这个样子(前提是:按照上面的步骤进行安装了)

{"name": "chatgpt02","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "electron .","build": "electron-builder"},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^24.0.0","electron-builder": "^23.6.0"},"dependencies": {"build": "^0.1.4","fs": "^0.0.1-security","packager": "^0.1.9","path": "^0.12.7"}
}

 1.7 配置最重要的打包安装包步骤

1. 先创建一个electron-builder.yml文件
2. （理解了下面注释之后在完成之后一定记得把注释里面的内容删除了）往文件中填写下面代码

   //这里的appid可以理解成唯一标注的码
   appId: com.example.myapp
   //这里productName打包形成的桌面端软件名称
   productName: chatgpt
   //打包成为dist目录
   directories:output: dist
   //perMachine: true: 指定安装程序是针对整个计算机还是当前用户的。如果为 true，则安装程序将被安装到所有用户的计算机上；如果为 false，则安装程序将只被安装到当前用户的计算机上。
   //oneClick: false: 指定是否使用一键安装模式。如果为 true，则安装程序将以默认设置直接安装，不会显示向导式的安装过程；如果为 false，则安装程序将显示向导式的安装过程，以允许用户更好地控制安装过程。
   //allowElevation: true: 指定是否允许请求管理员权限以执行某些操作。如果为 true，则安装程序可以请求管理员权限以执行需要管理员权限的操作；如果为 false，则安装程序将无法执行需要管理员权限的操作。
   //allowToChangeInstallationDirectory: true: 指定是否允许用户更改安装目录。如果为 true，则用户可以选择更改安装目录；如果为 false，则用户将无法更改安装目录，安装程序将使用预定义的目录进行安装。
   nsis:perMachine: trueoneClick: falseallowElevation: trueallowToChangeInstallationDirectory: true
   //在windows系统中打包好的logo
   win:icon: path/to/icon.pngtarget: nsis
   //打包下面几个文件夹
   files:- build/- node_modules/- package.json- index.js
   

   删掉注释之后

   appId: com.example.myappproductName: chatgpt
   directories:output: dist
   nsis:perMachine: trueoneClick: falseallowElevation: trueallowToChangeInstallationDirectory: true
   win:icon: path/to/icon.pngtarget: nsis
   files:- build/- node_modules/- package.json- index.js
   

 1.8 下面是对于logo的处理

1. 创建一个forge.config.js
2. 往文件中添加

   module.exports = {packagerConfig: {icon: "icon",},
   };
   

   

3. 

    以上就是整个文件的目录了

 1.9 运行npm run build安装

 控制台输出此时就完毕了

1.10 找到dist目录下面的chatgpt Setup 1.0.0.exe文件就可以进行安装了

总结

写到这里我今天的博客也就结束了

如果大家有不懂的欢迎评论区评论