Vue+Electron项目ESM模式下electron-store初始化失败求助

问题原因 #

你的代码直接在主进程顶部初始化electron-store，但electron-store内部依赖Electron的app.getPath() API生成存储文件路径，该API必须在Electron应用的ready事件触发后才能正常调用。提前初始化会导致store初始化失败，出现未定义报错。另外需确认使用的electron-store版本支持ESM格式，旧版本可能存在兼容性问题。

正确实现步骤 #

1. 在App就绪后初始化store
   将Store实例化代码放在Electron的app.whenReady()回调中，保证依赖的Electron API已可用。

2. 修正后的主进程代码

import { app, ipcMain, BrowserWindow } from 'electron';
import Store from 'electron-store';

let store;
let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    webPreferences: {
      // 根据项目需求配置，开启contextIsolation时需通过preload脚本通信
      contextIsolation: true,
      preload: './preload.js'
    }
  });

  // 加载Vue应用页面
  mainWindow.loadURL('http://localhost:5173'); // 替换为你的实际地址
}

app.whenReady().then(() => {
  // 关键：在App就绪后初始化store
  store = new Store();

  createWindow();

  // 处理IPC通信
  ipcMain.on("electronStore", (event, args) => {
    if (args.commandStr === "getElectronStore") {
      const value = store.get(args.key);
      mainWindow.webContents.send("electronStore", value);
    } else if (args.commandStr === "setElectronStore") {
      store.set(args.key, args.value);
    }
  });

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

3. 升级electron-store版本（可选）
   若使用的版本较旧，执行以下命令升级到最新版，确保ESM格式兼容性：

npm install electron-store@latest

额外注意事项 #

• 若项目开启了contextIsolation（Electron推荐配置），需通过preload脚本暴露IPC通信接口，避免渲染进程直接访问主进程模块。
• 可通过console.log(store.path)打印存储文件的实际路径，验证初始化是否成功。

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