本文测试基于CentOS 9，且均是在联网环境中操作！！！

内网环境注意配置yum、npm等代理！！！

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

1.  查看X11-forwarding是否打开，如已打开，则跳过该步。

2.  编辑/etc/ssh/sshd_config

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

3.  安装X11

yum install xorg-x11-xauth

4.  重新登录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安装相应的包

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

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

如有侵权请联系站点删除！