Windows环境下Electron启动报错GPU process不可用问题求助

在Windows系统搭建Electron环境，用于将HTML/CSS/JS项目打包为.exe文件。启动测试应用时，控制台重复输出GPU进程启动失败的错误，最终应用崩溃，无法显示预期的"Hello from Electron with Bulma CSS"页面。

错误日志 #

[3088:0525/235414.074:ERROR:gpu_process_host.cc(991)] GPU process launch failed: error_code=18
[3088:0525/235414.145:ERROR:gpu_process_host.cc(991)] GPU process launch failed: error_code=18
[3088:0525/235414.157:ERROR:gpu_process_host.cc(991)] GPU process launch failed: error_code=18
[3088:0525/235414.161:ERROR:gpu_process_host.cc(991)] GPU process launch failed: error_code=18
[3088:0525/235414.163:ERROR:gpu_process_host.cc(991)] GPU process launch failed: error_code=18
[3088:0525/235414.165:ERROR:gpu_process_host.cc(991)] GPU process launch failed: error_code=18
[3088:0525/235414.171:ERROR:gpu_process_host.cc(991)] GPU process launch failed: error_code=18
[3088:0525/235414.173:ERROR:gpu_process_host.cc(991)] GPU process launch failed: error_code=18
[3088:0525/235414.176:ERROR:gpu_process_host.cc(991)] GPU process launch failed: error_code=18
[3088:0525/235414.176:FATAL:gpu_data_manager_impl_private.cc(448)] GPU process isn't usable. Goodbye.

项目文件信息 #

项目目录：C:\proyectos\electron\testapp

package.json #

{
  "name": "testapp",
  "version": "1.0.0",
  "description": "My Electron test app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "Enrique Sifontes",
  "license": "BSD-2-Clause",
  "devDependencies": {
    "electron": "^30.0.8"
  }
}

index.html #

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!-- CSP太麻烦了；已禁用，请勿在本地环境尝试！-->
    <meta http-equiv="Content-Security-Policy" content="">
    <!-- 引入bulma css -->
    <link rel="stylesheet" href="bulma/css/bulma.min.css">
    <title>My Test App</title>
    <script>
        window.addEventListener('load', (event) => {
            document.querySelector(".hello").textContent = "Hello from Electron with bulma css!";
        });
    </script>
</head>

<body>
    <section class="section">
        <div class="container">
            <div class="notification is-warning has-text-centered hello">
                
            </div>
        </div>
    </section>
    <script defer src="./index.js"></script>
</body>

</html>

index.js #

//这是使用Node.js引入模块的方式，此处引入的是Electron模块。
//你可以通过搜索互联网上的CommonJS模块相关信息来了解更多导入模块的知识
const { app, BrowserWindow } = require('electron')

//创建主窗口，此处可设置初始尺寸。
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  //将要显示的HTML文件，我们会在下一部分创建该文件。
  win.loadFile('index.html')
}

//这是我们的启动事件，当应用“就绪”后，创建主窗口。
app.whenReady().then(() => {
  createWindow()
})

解决方法 #

以下是几种有效解决该问题的方案，按优先级尝试：

1. 禁用硬件加速 #

在index.js中创建窗口前添加禁用硬件加速的代码，这是最直接的解决方式：

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

// 添加此行禁用硬件加速
app.disableHardwareAcceleration();

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  win.loadFile('index.html')
}

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

2. 关闭GPU沙箱模式 #

若禁用硬件加速无效，尝试添加命令行参数关闭沙箱：

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

// 添加以下两行关闭沙箱
app.commandLine.appendSwitch('--no-sandbox');
app.commandLine.appendSwitch('--disable-gpu-sandbox');

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  win.loadFile('index.html')
}

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

3. 更新显卡驱动 #

该错误可能源于显卡驱动与Electron版本不兼容，前往显卡厂商官网（NVIDIA/AMD/Intel）下载并安装最新驱动，重启电脑后再尝试启动应用。

4. 降级Electron版本 #

Electron 30.x系列可能存在部分Windows环境下的GPU兼容性问题，可尝试降级到29.x稳定版本：

1. 卸载当前Electron：npm uninstall electron
2. 安装指定版本：npm install electron@29.4.4 --save-dev
3. 重新运行应用：npm start

内容的提问来源于stack exchange，提问作者easr97