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
相关推荐
暴走十八步3 天前
electron打包基本教程
前端·javascript·electron
jingxindeyi3 天前
electron 学习
electron·入门
星陈~3 天前
electron 本地文件管理系统关于下载的一个关键点
前端·javascript·electron
陆康永6 天前
Electron视图进程和主进程通讯
前端·javascript·electron
阿眠6 天前
vue3+vite项目引入electron运行为桌面项目
前端·javascript·electron
李富贵~6 天前
electron下载文件,弹窗选择下载路径,并通知下载进度
前端·javascript·vue.js·electron
gqkmiss6 天前
Electron 客户端心跳定时任务调度库调研文档 - Node.js 任务调度库技术调研文档
javascript·electron·node.js·定时任务·任务调度
卢可以6 天前
$ npx electron-forge import 一直报权限问题 resource busy or locked,
javascript·arcgis·electron
海上彼尚6 天前
Electron 实现自定义系统托盘菜单
前端·javascript·electron
土豆烩茄子7 天前
Electron:使用electron-react-boilerplate创建一个react + electron的项目
前端·react.js·electron