Electron中__dirname导致路径拼接异常的问题求助

问题分析 #

你遇到的核心问题是Webpack打包Electron主进程时，默认修改了__dirname的行为，导致createDocument函数内部调用path.join时__dirname变为undefined，从而生成undefinedassets/file.html这类错误路径。虽然配置窗口图标时__dirname能正常工作，但函数作用域下的__dirname因Webpack打包规则被替换，失去了Node.js原生的路径指向能力。

解决方案 #

1. 修正Webpack配置，保留__dirname原生行为 #

在Electron主进程的Webpack配置文件（通常命名为webpack.main.config.js）中，添加node配置项，禁止Webpack替换__dirname和__filename：

module.exports = {
  // 其他已有配置...
  node: {
    __dirname: false,
    __filename: false
  }
};

重新打包后，__dirname会恢复为Node.js原生的当前模块目录路径，路径拼接即可正常工作。

2. 使用Electron原生API替代__dirname #

改用Electron提供的app.getAppPath()获取应用根目录，这个API不受Webpack打包影响，路径指向更可靠：
修改documents.js中的代码：

const createDocument = (template, title, data) => {
    const appRoot = app.getAppPath();
    popup = new BrowserWindow({
        show: true,
        title: title,
        parent: global.mainWindow,
        modal: true,
        icon: path.join(appRoot, 'assets', 'hr.ico'),
        resizable: true,
    });
    popup.loadFile(path.join(appRoot, 'assets', template), data);
    popup.setMenu(null);
    popup.show();
};

3. 规范路径拼接方式 #

避免手动拼接路径字符串，直接将路径片段作为独立参数传给path.join，让它自动处理跨平台路径分隔符，减少人为错误：
错误写法：

path.join(__dirname, '/assets' + template)

正确写法：

path.join(__dirname, 'assets', template)

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