Electron如何将package.json中的版本号显示在页面footer中？

API 探路者

2026-6-14

核心问题

你的代码缺少preload脚本的IPC桥接配置，Electron的安全策略不允许渲染进程直接访问ipcRenderer，必须通过preload脚本显式暴露需要的API。

完整修复步骤

1. 编写正确的preload.js

在src/preload.js中添加以下代码，将ipcRenderer.invoke方法安全暴露给渲染进程：

const { contextBridge, ipcRenderer } = require('electron');

// 向渲染进程暴露IPC方法
contextBridge.exposeInMainWorld('electronAPI', {
  getAppVersion: () => ipcRenderer.invoke('get-version')
});

2. 修改renderer.js调用暴露的API

原代码直接调用ipcRenderer.invoke会触发安全报错，需改为调用preload暴露的全局对象：

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOMContentLoaded');
  
  // 使用暴露的API获取版本号并更新footer
  window.electronAPI.getAppVersion().then(version => {
    const footerElement = document.querySelector('#footer p');
    if (footerElement) {
      footerElement.textContent = `Version ${version}`;
    }
  }).catch(err => {
    console.error('获取版本号失败:', err);
  });
});

3. 确认关键配置正确性

检查main.js中的preload路径：你的代码里path.join(__dirname, 'src/preload.js')路径正确，只要项目结构是根目录下的src文件夹即可。
确认package.json的version字段：确保version已正确设置（如"version": "1.0.0"）。