Electron应用启动时如何将环境变量值从主进程传递到渲染线程

1. 修正主进程消息发送逻辑 #

你现有代码存在消息发送时机过早的问题：调用win.webContents.send时页面还未完成加载，渲染进程的事件监听器还未挂载，大概率会丢失消息。同时需要新增预加载脚本配置，用于实现主进程和渲染进程的安全通信，修改后的main.js代码如下：

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

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // 配置预加载脚本的绝对路径
            preload: path.join(__dirname, 'preload.js')
        }
    });
  
    win.loadFile('index.html');

    // 读取环境变量
    const variableValue = process.env.MY_ENVIRONMENT_VARIABLE;
    console.log(`Variable value: ${variableValue}`);

    // 等待页面加载完成后再发送消息，确保监听器已就绪
    win.webContents.on('did-finish-load', () => {
        win.webContents.send('initialize', { variableName: variableValue });
    })
}

app.whenReady().then(createWindow)
// 其余应用生命周期逻辑保持不变即可

2. 编写预加载脚本preload.js #

Electron默认开启上下文隔离，渲染进程无法直接调用IPC接口，需要通过预加载脚本向渲染层暴露安全的通信能力，在项目根目录新建preload.js，代码如下：

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

// 向渲染进程的window对象挂载自定义API
contextBridge.exposeInMainWorld('electronAPI', {
    // 注册监听初始化事件的方法
    onInitialize: (callback) => {
        ipcRenderer.on('initialize', (_event, envData) => callback(envData))
    }
})

3. 渲染端获取环境变量 #

你可以直接在index.html的脚本标签，或者单独引入的渲染进程JS文件中，调用预加载暴露的接口获取变量：

// 监听主进程发送的初始化事件，拿到环境变量
window.electronAPI.onInitialize((envData) => {
    const myEnv = envData.variableName
    // 此处可直接使用拿到的环境变量执行业务逻辑
    console.log('获取到的环境变量值为：', myEnv)
})

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