Electron无法获取当前文件路径问题咨询（Electron+React开发场景）

我完全懂你碰到的这个坑——开发阶段Electron加载的是webpack-dev-server的远程URL（http://localhost:3000），此时渲染进程跑在浏览器环境里，而非本地文件协议，像__dirname、path.join这类依赖本地文件系统的API自然就失效了。下面给你几个实用的解决方案：

方案1：通过IPC从主进程传递路径信息 #

主进程一直运行在Node.js环境中，__dirname这类路径变量是有效的，我们可以用Electron的IPC机制把需要的路径传给渲染进程：

主进程（index.js）修改示例 #

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const isDev = require('electron-is-dev'); // 先执行 npm install electron-is-dev

let win;

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 开发模式可开启，生产环境建议用contextBridge替代
      contextIsolation: false, // 配合nodeIntegration使用
      enableRemoteModule: true
    }
  });

  // 更优雅区分开发/生产环境的加载地址
  const loadUrl = isDev 
    ? 'http://localhost:3000' 
    : `file://${path.join(__dirname, '../build/index.html')}`;
  
  win.loadURL(loadUrl);

  // 页面加载完成后，向渲染进程发送项目根路径
  win.webContents.on('did-finish-load', () => {
    win.webContents.send('send-root-path', app.getAppPath());
  });
}

app.whenReady().then(createWindow);

React渲染进程（比如App.js）接收路径 #

import { useEffect, useState } from 'react';
const { ipcRenderer } = window.require('electron');

function App() {
  const [rootPath, setRootPath] = useState('');

  useEffect(() => {
    // 监听主进程发来的路径
    ipcRenderer.on('send-root-path', (event, path) => {
      setRootPath(path);
      console.log('拿到的项目根路径：', path);
    });

    // 组件卸载时清理监听
    return () => {
      ipcRenderer.removeAllListeners('send-root-path');
    };
  }, []);

  return (
    <div className="App">
      <p>当前项目根路径：{rootPath}</p>
    </div>
  );
}

export default App;

方案2：开发模式下给渲染进程开启Node环境权限 #

如果你想直接在React组件里使用Node的路径API，可以在主进程创建窗口时配置webPreferences，开启Node集成（注意：生产环境不建议这么做，会有安全风险）：

webPreferences: {
  nodeIntegration: true,
  contextIsolation: false
}

配置后就能在React组件里直接引入path模块使用，但开发模式下Electron会弹出安全警告，你可以在主进程开头添加以下代码关闭警告：

app.commandLine.appendSwitch('disable-web-security');
app.commandLine.appendSwitch('allow-running-insecure-content');

方案3：用process.cwd()获取项目根路径 #

在主进程里，process.cwd()会返回你启动Electron时的工作目录（也就是项目根目录），这个路径在开发和生产环境都能正常获取，你可以把它传递给渲染进程使用。

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