Electron中无法引入本地JS模块问题求助（Node/Electron新手）

嘿，我刚看完你的问题，这个坑我当初学Electron的时候也踩过！问题的根源其实是Node.js环境和Electron渲染进程（浏览器环境）对相对路径的解析逻辑不一样，咱们一步步拆解：

为什么会报错？ #

• 当你直接用node game/test.js运行时，Node.js会把./properties解析为相对于test.js所在的game/目录，所以能正常找到同目录的properties.js。
• 但当你通过HTML的<script src="../../game/test.js"></script>引入test.js时，这个脚本是在Electron的渲染进程（浏览器上下文）中执行的，此时./properties的相对路径是相对于HTML文件所在的assets/html/目录，而不是test.js的目录！所以Electron会去assets/html/properties.js找文件，自然找不到，就报了Cannot find module的错误。

解决方案（按推荐程度排序） #

1. 用__dirname+path模块生成绝对路径（最稳妥） #

Node.js的__dirname变量会返回当前模块文件所在的绝对路径，结合path.join可以生成不受执行上下文影响的可靠路径，修改你的test.js：

const path = require('path');
// 用__dirname获取test.js的目录，再拼接properties.js的路径
const properties = require(path.join(__dirname, './properties'));

不过要注意：在Electron的新版本（v12+）中，默认开启了contextIsolation和关闭了nodeIntegration，这时候渲染进程里用不了require和__dirname，所以你需要在main.js的窗口配置里开启Node.js集成：

// main.js里的窗口创建代码
const { app, BrowserWindow } = require('electron');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 开启渲染进程的Node.js集成
      contextIsolation: false // 关闭上下文隔离，让require能直接用（开发阶段可以这么做，生产环境要注意安全）
    }
  });

  mainWindow.loadFile('assets/html/main_window.html');
}

app.whenReady().then(createWindow);

2. 直接修改相对路径为相对于HTML的位置 #

如果你只是临时调试，可以直接把test.js里的require路径改成相对于HTML文件的位置：

// 从assets/html/出发，../../game/properties就是正确路径
const properties = require('../../game/properties');

但这种方法不够灵活，一旦文件目录结构变动，你就得手动修改路径，所以不推荐长期用。

3. 改用ES模块语法（进阶） #

如果你想跟上现代JS的趋势，可以把代码改成ES模块：

• 在package.json里添加"type": "module"
• 把test.js里的require改成import：

import properties from './properties.js';

同时要确保你的Electron版本支持ES模块，并且HTML的script标签要加type="module"：

<script type="module" src="../../game/test.js"></script>

不过这种方法对新手来说需要调整的地方更多，适合后续熟悉Electron后再尝试。

验证方法 #

修改完代码后，重新运行npm start，打开DevTools看看控制台，如果没有报错，就说明问题解决啦！

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