Electron中Node.js脚本无法加载系统信息至HTML页面的问题

1. Electron渲染进程Node.js权限缺失 #

你的systeminfo.js直接在HTML渲染进程中调用require('systeminformation')，但默认Electron渲染进程未开启Node.js集成，会导致require未定义的错误，脚本直接中断，无法执行后续DOM操作。

解决：
在Electron主进程（如main.js）创建窗口时，需配置开启Node.js集成：

// main.js示例代码
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
      // 更安全的方案是使用预加载脚本，推荐：
      // preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWindow.loadFile('index.html');
}

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

若用预加载脚本（符合Electron安全规范），可在preload.js中暴露所需模块：

// preload.js
const { contextBridge } = require('electron');
const si = require('systeminformation');

contextBridge.exposeInMainWorld('systemInfo', {
  getGpuData: () => si.graphics(),
  getCpuTemp: () => si.cpuTemperature(),
  getCpuLoad: () => si.currentLoad(),
  getCpuInfo: () => si.cpu()
});

渲染进程中通过window.systemInfo.getGpuData()调用，替代直接require。

2. CPU名称获取逻辑错误 #

你代码中const cpuName = cpuData.main;完全错误：si.cpuTemperature()返回的是温度数据，main代表CPU主温度，并非CPU名称。正确获取CPU名称需调用si.cpu()：

// 修正后的CPU信息获取
const cpuInfo = await si.cpu();
const cpuName = cpuInfo.brand;

3. DOM元素访问风险 #

• 脚本放在tab-pane内部，DOMContentLoaded触发时，该标签页可能处于隐藏状态（fade类表明是Bootstrap标签页），部分隐藏元素的DOM节点可能未完全初始化，导致getElementById返回null，赋值失败。
• gpuData.controllers[0]可能不存在（如无独立GPU、多GPU识别异常），直接访问会抛出错误中断脚本，后续DOM操作无法执行。

解决：

• 将<script src="systeminfo.js"></script>移到HTML的</body>标签前，确保所有DOM元素加载完成后再执行脚本；
• 增加存在性判断，避免空指针错误：

async function getSystemInfo() {
    try {
        const gpuData = await si.graphics();
        const cpuTempData = await si.cpuTemperature();
        const cpuInfo = await si.cpu();

        // GPU信息安全赋值
        if (gpuData.controllers.length > 0) {
            const gpu = gpuData.controllers[0];
            const gpuNameElement = document.getElementById('gpuName');
            const gpuTempElement = document.getElementById('gpuTemp');
            const gpuUsageElement = document.getElementById('gpuUsage');
            
            if (gpuNameElement) gpuNameElement.innerText = `GPU Name: ${gpu.model || 'Unknown'}`;
            if (gpuTempElement) gpuTempElement.innerText = `GPU Temp: ${gpu.temperatureGpu || 'N/A'} °C`;
            if (gpuUsageElement) gpuUsageElement.innerText = `GPU Usage: ${gpu.loadGpu || 'N/A'}%`;
        }

        // CPU信息安全赋值
        const cpuNameElement = document.getElementById('cpuName');
        const cpuTempElement = document.getElementById('cpuTemp');
        
        if (cpuNameElement) cpuNameElement.innerText = `CPU Name: ${cpuInfo.brand || 'Unknown'}`;
        if (cpuTempElement) cpuTempElement.innerText = `CPU Temp: ${cpuTempData.main || 'N/A'} °C`;

    } catch (error) {
        console.error('System Info Error:', error);
    }
}

4. 脚本执行时机优化 #

如果是Bootstrap标签页，建议在切换到systemPanel标签时再加载数据，而非页面初始化时：

// 替换原DOMContentLoaded监听
document.addEventListener('shown.bs.tab', (event) => {
  if (event.target.getAttribute('href') === '#systemPanel') {
    getSystemInfo();
  }
});

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