electron: 将网址打包成exe桌面应用

项目场景：

在项目开发的过程中，需要将应用搭建在不同的硬件上。如需要在一个触屏显示器上展示企业相关的应用。

如果专门去开发一个这样的应用，不划算；这时候考虑将网址打包成exe应用，并安装触屏器上，就可以满足客户的需求。

项目就是为了特定的目的，消耗一定的资源，在确定的时间内，提供特定的产品。同时也要注意，产品不一样要最好的，但是一定要是合适的，满足客户需求的。

---

解决方案

目前主要解决方案有三种：一种是让第三方进行打包，还有一种是用Nativefier， 最后一种是用electron进行打包。

首先用第三方打包，优点是方便，确定是要花钱。

其次是Nativefier，这个可以下载对应的应用，然后用命令的方式直接打包，优点是免费，方便，缺点是logo设置优点麻烦，一般只能在本地使用，不能给其他人安装，不然logo容易丢失。以下是自己用Nativefier进行打包的教程。

https://blog.csdn.net/weixin_44565776/article/details/139435103

最后一种是用electron进行打包，优点是方便，并且可以随意转发给其它人安装使用，缺点是logo需要特定的尺寸，一般为256*256，推荐格式是ico格式，打包有点麻烦。

最终我选择了最后一种方案。因为便宜又好用。

---

代码实施：

nodejs版本：20.10.0

因为在下载electron的过程中，需要在29.1.6以上版本，所以在下载时要注意；以下是package.json的代码，可以按照这个包进行下载安装。

{"name": "electron-app","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "electron-forge start","build": "electron-builder --win",  "test": "echo \"Error: no test specified\" && exit 1"},"build": {"productName": "百度",//打包应用名称"directories": {"output": "out" },"win": {"icon": "./icon/favicon.ico","target": [{"target": "nsis","arch": ["x64","ia32"]}]},"nsis": {"oneClick": false,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "./icon/favicon.ico",//打包logo"uninstallerIcon": "./icon/favicon.ico",//打包logo"installerHeaderIcon": "./icon/favicon.ico",//打包logo 以上lkogo推荐用一个"createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "百度"//打包应用名称}},"keywords": [],"author": "","license": "ISC","devDependencies": {"@electron-forge/cli": "^7.4.0","electron": "^29.1.6","electron-builder": "^24.13.3"}
}

以下是index.js的代码：

const { app, BrowserWindow } = require('electron')
const createWindow = () => {// 创建浏览器窗口const win = new BrowserWindow({autoHideMenuBar: true,})// 全屏win.maximize()// 载入要打包的网页链接win.loadURL('https://www.baidu.com/')
}// 应用程序准备好后加载窗口
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 窗口关闭后退出应用程序
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

有以上两块核心代码，然后自己创建一个。

---

收获：

在运用这个应用我给多位客户打包过网址，并还赚了几百大洋的零花钱。

如果你需要网址打包，可以@我哈！