方法一：

在创建浏览器窗口示例的主文件中，需要**“path”和“dotenv”**（也初始化dotenv），触发ipcMain事件处理主进程和渲染进程之间的进程间通信（IPC）。
最后，在webPreferences中添加一个名为preload option的属性，如下所示：

import {
  BrowserWindow,
  ipcMain,
} from "electron";

const path = require("path");
const config = require("dotenv");
config.config();

ipcMain.on("invokeEnv", (event) => {
   event.sender.send("envReply", config);
});

let win = new BrowserWindow {
width: 500,
height: 600,
webPreferences: {
  nodeIntegration: true,
  contextIsolation: false,
  preload: path.join(__dirname, "preload.js"),
 },
};

您可以在app文件夹中创建preload.js文件，在preload.js中粘贴代码块下面。

const electron = require("electron");

async function getConfig() {
let config = null;
  const ipcRenderer = electron.ipcRenderer || false;
  if (ipcRenderer) {
    ipcRenderer.on("envReply", (event, arg) => {
      config = arg.parsed;
      return config.parsed;
    });
    ipcRenderer.send("invokeEnv");
  }
}

getConfig();

preload.js脚本公开渲染器需要的模块。
因此，您不必在渲染器js文件中要求ipcRenderer（或任何其他节点模块），您可以直接使用它，它现在应该可以工作了
现在你可以在你的js文件或任何组件中使用console.log(process.env.SHOPIFY_STORE)，如果你使用的是React/Next.js
我想告诉你一件事：
在preload.js中
dotenv config对象将返回一个对象，其中包含另一个名为“parsed”的对象。
在“解析”对象中，您将获得.env文件中定义的所有ENV
请不要被上面的解释搞糊涂了，所有的环境仍然可以通过调用process.env.YOUR_ENV_NAME获得

方法二：

const config = require("dotenv");
config.config();

只需要在你的主文件中初始化dotenv模块，比如你创建浏览器窗口的地方

注：方法2仅在Nextron上进行了测试

Nextron =〉Electron.js + Next.js更多信息Nextron

方法三：

A portable ENV access method

• 部分参考资料：*
• Reference#1
• Reference#2
• Reference#3
• Reference#4