Electron 网页应用桌面化 -- A Hello World Demo

本文测试基于CentOS 9,且均是在联网环境中操作!!!
内网环境注意配置yum、npm等代理!!!

安装X11(如果已经安装了图形化界面可跳过该步)

  1. 查看X11-forwarding是否打开,如已打开,则跳过该步。
  1. 编辑/etc/ssh/sshd_config

编辑保存后,重启sshd服务。

  1. 安装X11

yum install xorg-x11-xauth

  1. 重新登录ssh,检查X11-forwarding是否开启

安装node,npm

bash 复制代码
# installs NVM (Node Version Manager)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# download and install Node.js

nvm install 20

# verifies the right Node.js version is in the environment

node -v # should print `v20.12.1`

# verifies the right NPM version is in the environment

npm -v # should print `10.5.0`

内网需下载安装包,注意高版本node.js需要匹配更高的GLIBC版本!出现兼容性问题,可参考下面这篇文章(不保证能解决): node: /lib64/libm.so.6: version `GLIBC_2.27' not found问题解决方案 - xiao智 - 博客园

创建应用

创建应用脚手架

perl 复制代码
mkdir my-electron-app && cd my-electron-app

npm init

其中,npm init会弹出一个交互式命令行,提示你一步一步创建应用,创建完成后你可以在package.json文件中查看刚刚创建的应用属性。

安装electron

npm install --save-dev electron

添加main.js

js 复制代码
// main.js

// Modules to control application life and create native browser window

const { app, BrowserWindow } = require('electron')

const path = require('node:path')

const createWindow = () => {

  // Create the browser window.

  const mainWindow = new BrowserWindow({

    width: 800,

    height: 600,

    webPreferences: {

      preload: path.join(__dirname, 'preload.js')

    }

  })

  // and load the index.html of the app.

  mainWindow.loadFile('index.html')

  // Open the DevTools.

  // mainWindow.webContents.openDevTools()

}

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

// Some APIs can only be used after this event occurs.

app.whenReady().then(() => {

  createWindow()

  app.on('activate', () => {

    // On macOS it's common to re-create a window in the app when the

    // dock icon is clicked and there are no other windows open.

    if (BrowserWindow.getAllWindows().length === 0) createWindow()

  })

})

// Quit when all windows are closed, except on macOS. There, it's common

// for applications and their menu bar to stay active until the user quits

// explicitly with Cmd + Q.

app.on('window-all-closed', () => {

  if (process.platform !== 'darwin') app.quit()

})

// In this file you can include the rest of your app's specific main process

// code. You can also put them in separate files and require them here.

启动应用

npm start

此时,可以看到弹出一个应用窗口,如下:

生成应用

安装打包工具

对于RPM打包,需要安装rpm-build

dnf install rpm-build

如果要打其他类型的包,请参考文档Makers | Electron Forge

安装electron-forge

java 复制代码
npm install --save-dev @electron-forge/cli

npx electron-forge import

✔ Checking your system

✔ Initializing Git Repository

✔ Writing modified package.json file

✔ Installing dependencies

✔ Writing modified package.json file

✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

生成发布包

css 复制代码
npm run make

> my-electron-app@1.0.0 make /my-electron-app

> electron-forge make

✔ Checking your system

✔ Resolving Forge Config

We need to package your application before we can make it

✔ Preparing to Package Application for arch: x64

✔ Preparing native dependencies

✔ Packaging Application

Making for the following targets: zip

✔ Making for target: zip - On platform: darwin - For arch: x64

如果不想生成deb包,可以把forge.config.js中的相应配置去掉,如下图,然后再执行make命令。

生成的发布包路径为out/make/rpm/x64/my-electron-app-1.0.0-1.x86_64.rpm

Trouble Shooting

启动electron时报缺少动态链接库

解决方法:yum安装相应的包

动态库 RPM包
libnss3.so nss
libatk-1.0.so.0 atk
libatk-bridge-2.0.so.0 at-spi2-atk
libcups.so.2 cups
libdrm.so.2 libdrm
libgtk-3.so.0 gtk3
swrast_dri mesa-dri-drivers

Running as root without --no-sandbox is not supported

解决方法:修改package.json,在启动命令上加上--no-sandbox参数

Exiting GPU process due to errors during initialization

解决方法:修改package.json,在启动命令上加上--disable-gpu参数

Cannot find module '@electron-forge/plugin-fuses'

执行npm run make时报错:

解决方法:手动安装plugin-fuses再执行make:

css 复制代码
npm install --save-dev @electron-forge/plugin-fuses
相关推荐
孙凯亮4 小时前
Electron 接口请求全解析:从疑问到落地(真实开发对话整理)
前端·electron
闲坐含香咀翠4 小时前
Electron 桌面端多语言优化实战:从静态全量加载到懒加载与用户自定义
前端·electron·客户端
SailingCoder20 小时前
Electron 安全IPC核心:contextBridge 安全机制
javascript·安全·electron
Cdlblbq1 天前
搜索会员中心 创作中心Vue2项目一键打包成桌面应用
前端·javascript·vue.js·electron
午安~婉1 天前
Electron(续4)利用AI辅助完成配置功能
前端·javascript·electron·应用打包与发布
午安~婉5 天前
Electron桌面应用(续3)
前端·javascript·electron·重构通用模型·异步可迭代对象
午安~婉5 天前
Electron桌面应用(续2)
前端·javascript·electron·路由守卫·优化llm返回的内容
垚森7 天前
我用AI写了一个颜值拉满的桌面媒体播放器,全程没动一行代码,这就是AI编程新范式
ai·electron·react·opencode
光影少年7 天前
前端开发桌面端都有哪些框架?
前端·react.js·electron
萑澈8 天前
Windows 7 运行 Electron 安装包报“不是有效的 Win32 应用程序”怎么办
javascript·windows·electron