Electron开发：require导入模块提示Cannot find module问题求助

嘿，这个问题其实是Electron渲染进程中两种脚本加载方式的路径解析逻辑差异导致的，我给你详细拆解下：

核心差异：两种脚本引入方式的执行上下文不同 #

1. 用<script src="./scripts/index.js"></script>引入时 #

这种方式是让浏览器像加载普通前端JS文件一样加载你的脚本，此时脚本的执行上下文是浏览器全局环境。虽然Electron允许渲染进程调用Node.js API，但require的路径解析是基于HTML文件所在的目录，而不是你写require的那个JS文件的目录。

举个例子：如果你的文件结构是这样的

├── index.html
└── scripts/
    ├── index.js
    └── datacontainer.js

当你在index.html里用src引入scripts/index.js后，index.js里的require('./datacontainer')会去index.html所在的根目录找datacontainer.js，而不是scripts目录下的，自然就会报“找不到模块”的错误。

2. 用<script> require('./scripts/index') </script>引入时 #

这种方式是直接通过Node.js的模块加载系统来加载你的脚本，此时index.js会以Node.js模块的身份执行，它的__dirname会指向自身所在的scripts目录。这时候require('./datacontainer')就会正确去scripts目录下找对应的文件，所以不会出错。

解决办法 #

你可以根据自己的需求选下面任意一种方案：

• 方案一：调整require路径为相对于HTML文件的路径
  如果坚持用src属性引入脚本，那你需要把index.js里的require路径改成相对于HTML文件的路径：

  // index.js里改成这样
  const store = require('./scripts/datacontainer')
  

  或者用__dirname来生成绝对路径（需要先引入path模块）：

  const path = require('path')
  const store = require(path.join(__dirname, './datacontainer'))
  

• 方案二：始终用Node.js模块方式加载脚本
  就像你发现的那样，用<script> require('./scripts/index') </script>这种方式加载脚本，完全遵循Node.js的模块路径解析规则，和你在Node.js项目里写代码的逻辑一致，不容易踩路径的坑。

另外补充一点：如果你的Electron版本是5.0及以上，需要确保在主进程创建BrowserWindow时开启了Node集成，不然渲染进程里用不了require：

// main.js里的BrowserWindow配置
const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false // 如果用了Electron 12+，还需要设置这个为false，不然require会被隔离
  }
})

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