将环境变量值发送到 Electron 应用程序中的渲染器线程

Question

我有一个电子应用程序。我需要从本地计算机获取环境变量的值以在渲染器线程上使用。我想在应用程序启动时将此值传递给渲染器线程。我知道在main.js文件中，我可以像这样获取环境变量：

main.js

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    });
  
    win.loadFile('index.html');

    // Retrieve the environment variable value
    const variableValue = process.env.MY_ENVIRONMENT_VARIABLE;
    console.log(`Variable value: ${variableValue}`);

    // Send the variable and it's value to the renderer.
    win.webContents.send('initialize', { 'variableName':variableValue });
}

上面成功地将环境变量的值打印到终端窗口。但是，我需要在浏览器端使用这个值。我如何在那里获取变量的值？

谢谢你！

Answer 1

这不能直接从渲染器进程（关闭nodeIntegration）完成，因为它无法直接访问 Node.jsprocess变量。

最直接的方法是通过 BrowserWindow 的预加载脚本，它允许您通过 Electron 的contextBridgeAPI 向渲染器进程公开任意数据。一个例子：

// Main Process
const win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'); // require `path` if you haven't already
  }
});

// Preload Script
const { contextBridge } = require('electron');

// this should print out the value of MY_ENVIRONMENT_VARIABLE
console.log(process.env.MY_ENVIRONMENT_VARIABLE);

contextBridge.exposeInMainWorld('envVars', {
  myEnvironmentVariable: process.env.MY_ENVIRONMENT_VARIABLE
});

// Renderer Process
console.log(window.envVars.myEnvironmentVariable)

请参阅 contextBridge API 文档：https://www.electronjs.org/docs/latest/api/context-bridge