如何将 React 应用打包为 Linux 单文件程序并以 kiosk 模式运行？

可以将应用打包成单个文件分发，用户无需单独安装 Chromium。对于现有 React 应用，Electron 配合 AppImage 是一个直接的方案。Electron 自带 Chromium 和 Node.js，应用启动后可以通过 BrowserWindow 进入 kiosk 模式。Electron 官方介绍

如果要求完全不依赖任何系统组件，Electron 和 Tauri 都无法提供这种保证。Linux 图形程序仍需要兼容的系统库、图形环境和驱动。单文件分发不意味着所有依赖都经过静态链接，也不保证程序能在任意 Linux 发行版上运行。

.out、.deb 和 .AppImage 有什么区别？

Linux 可执行程序不要求使用 .out 后缀。文件能否运行取决于文件格式、执行权限、CPU 架构和运行环境，改名为 .out 不会消除依赖。

原问题中的 .dev 很可能是 .deb 的笔误：

• .deb 是 Debian 系发行版的安装包，需要安装，不能作为便携程序直接启动。
• .AppImage 可以将应用及其所需的许多运行文件封装为一个可执行文件，更接近“复制一个文件即可启动”的目标。
• Electron 通常需要搭配 Electron Forge 或 electron-builder 等工具生成分发包。electron-builder 支持 AppImage、deb、rpm 等 Linux 目标。Electron 打包说明、electron-builder Linux 配置

Electron 和 Tauri 应该怎样选？

Tauri 在 Linux 上使用 webkit2gtk，现有应用在 Chromium 和 Tauri 中的表现可能不同。Tauri 也可以生成 AppImage，用户不一定需要手动安装全部 WebView 依赖。具体依赖如何交付，取决于打包格式和配置。Tauri WebView 说明、Tauri AppImage 文档

如果优先目标是替换当前“shell 脚本调用 Chromium”的方式，可以先采用 Electron + AppImage。

如何用 Electron 打开现有 URL 并进入 kiosk 模式？

下面的示例沿用已部署的 React 应用 URL，无需修改 React 项目。先在独立的包装项目目录中初始化项目并安装依赖。构建机器需要 Node.js 和 npm：

npm init -y
npm install --save-dev electron electron-builder

创建 main.cjs，将示例 URL 换成自己的应用地址：

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

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    kiosk: true,
    autoHideMenuBar: true,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      sandbox: true
    }
  });

  mainWindow.setMenu(null);
  mainWindow.webContents.setWindowOpenHandler(() => ({
    action: 'deny'
  }));

  mainWindow.loadURL('https://example.com').catch((error) => {
    console.error('Failed to load kiosk application:', error);
  });
});

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

kiosk: true 用于创建 kiosk 窗口，也可以调用 win.setKiosk(true) 切换模式。BrowserWindow API

远程页面应通过 HTTPS 加载，并保持 Node.js 集成关闭、上下文隔离和沙箱开启。示例禁止了新窗口；如果应用依赖弹窗登录，需要按实际登录流程调整，并限制允许的导航目标。Electron 安全说明

如何生成单个 AppImage？

将以下字段合并到包装项目的 package.json，保留安装依赖后生成的 devDependencies：

{
  "name": "react-kiosk",
  "version": "1.0.0",
  "description": "React kiosk desktop application",
  "main": "main.cjs",
  "scripts": {
    "start": "electron .",
    "pack:linux": "electron-builder --linux --x64"
  },
  "build": {
    "appId": "com.example.reactkiosk",
    "productName": "React Kiosk",
    "artifactName": "react-kiosk.AppImage",
    "directories": {
      "output": "release"
    },
    "files": [
      "main.cjs",
      "package.json"
    ],
    "linux": {
      "target": ["AppImage"],
      "category": "Utility"
    }
  }
}

这个例子面向 Linux x64。先在具有图形桌面的 Linux 构建环境中试运行，再打包：

npm start
npm run pack:linux
chmod +x release/react-kiosk.AppImage
./release/react-kiosk.AppImage

目标机器运行打包后的应用时，无需另外安装 Node.js、npm 或 Chromium，但仍需满足该产物的系统运行条件。ARM64 等架构需要使用对应的构建目标，不能直接使用这里的 x64 产物。electron-builder 配置说明

如果还需要离线运行怎么办？

上面的代码加载远程 URL，需要网络和可用的服务端。若要把前端页面一起分发，需要先构建 React 应用，将构建产物加入打包文件列表，再改为加载本地入口。

例如，假设构建产物位于 web-dist/index.html：

const path = require('node:path');

mainWindow.loadFile(
  path.join(__dirname, 'web-dist', 'index.html')
);

同时在 build.files 中加入 web-dist/**/*。这里的目录名只是示例，应以项目实际构建输出为准。

本地加载还需要检查静态资源路径、前端路由和 API 请求。对于依赖服务器回退的 history 路由，不能只替换入口地址就认为打包完成；可以根据项目情况采用 hash 路由或配置应用协议。前端资源随包分发，也不会让远程后端自动具备离线能力。

部署时还需要注意什么？

AppImage 仍有系统兼容性边界。例如，Tauri 官方文档提醒，较新构建环境可能引入较高的 glibc 要求。应选择兼容目标机器的构建基线，并在实际发行版上验证。Tauri AppImage 兼容性说明

部分 AppImage 的直接启动还需要 FUSE。缺少 FUSE 时，可能需要安装相应组件，或使用该 AppImage 支持的解包运行方式。因此，不能承诺所有 Linux 桌面都无需额外配置。AppImage FUSE 说明

kiosk 窗口只负责应用的展示模式。如果设备还需要开机自启、崩溃后重启或阻止切换到其他桌面程序，就需要配置 Linux 桌面会话和进程管理，单靠生成 AppImage 无法完成。

备注：内容仅供参考。