Electron项目中npm start命令无法运行的问题求助

我用HTML、CSS和JavaScript制作了一个简易笔记应用，想要通过Electron框架转为桌面应用，但执行npm start命令启动时失败，终端输出以下日志：

> notes-app@1.0.0 start
> electron .

[17011:0428/235408.856171:ERROR:bus.cc(407)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory
[17011:0428/235408.946582:ERROR:ozone_platform_x11.cc(244)] Missing X server or $DISPLAY
[17011:0428/235408.946601:ERROR:env.cc(258)] The platform failed to initialize.  Exiting.
/workspaces/Notes-App/node_modules/electron/dist/electron exited with signal SIGSEGV

项目结构：根目录下存放main.js，网页相关的HTML、CSS、JavaScript文件放在src文件夹中。

相关代码 #

main.js

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

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
    });

    win.loadFile('src/index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
})

src/script.js

var textarea = document.querySelector('textarea');

textarea.addEventListener("input", function () {
    var textWritten = textarea.value;
    localStorage.setItem("written", textWritten);
});

var written = localStorage.getItem("written");

if (written) {
    textarea.value = written;
}

问题原因与解决办法 #

这个错误的核心原因是Electron依赖图形界面环境运行，当前终端环境未配置$DISPLAY变量或缺少X Server支持（常见于无GUI的服务器、未启用图形支持的WSL、云开发环境等场景）。

针对不同环境的解决方案：

1. 本地Linux/WSL环境

   • 若使用WSL，先安装图形支持组件，再设置DISPLAY变量：

     export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0.0
     

   • 本地Linux无GUI时，安装虚拟X Server并运行：

     sudo apt install xvfb
     xvfb-run npm start
     

2. 云开发环境（如GitHub Codespaces）

   • 启用内置VNC桌面支持，通过浏览器访问桌面后再执行npm start；
   • 若仅需验证逻辑，可开启Electron无头模式：修改main.js的BrowserWindow配置，添加webPreferences: { offscreen: true }：

     function createWindow() {
         const win = new BrowserWindow({
             width: 800,
             height: 600,
             webPreferences: { offscreen: true }
         });
         win.loadFile('src/index.html');
         win.webContents.on('render-process-gone', (event, details) => {
             console.log('渲染进程退出:', details);
         });
     }
     

3. Windows/macOS本地环境

   • 确保系统图形界面正常运行，检查是否有杀毒软件/防火墙阻止Electron创建窗口，尝试以管理员权限运行终端后执行npm start。

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