Electron应用页面导航后require路径无效问题求助

首先咱们先揪出核心问题：你的auth.html放在src文件夹里，而你写的require('./src/auth-renderer.js')是在找当前HTML文件所在目录下的src子文件夹里的auth-renderer.js——也就是实际会去查src/src/auth-renderer.js，这显然和你的文件夹结构不匹配，毕竟auth-renderer.js和auth.html是同级的，都在src目录下。

可能的原因及对应解决办法 #

• 相对路径写错了：
  直接把auth.html里的代码改成下面这样就行，这样会从auth.html所在的src目录直接找同级的auth-renderer.js，路径就完全正确了：

  require('./auth-renderer.js')
  

• 加载auth.html时的路径配置错误：
  如果你是在main进程里加载auth.html，一定要确保路径配置准确。比如正确的加载代码应该是这样：

  // main.js里加载auth.html的示例代码
  authWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'src/auth.html'),
    protocol: 'file:',
    slashes: true
  }))
  

  要是加载时路径写错了，会导致渲染进程里的相对路径基准出错，也会引发找不到文件的问题。

• 上下文隔离或Node集成的设置问题：
  如果你在创建BrowserWindow的时候开启了contextIsolation: true（Electron 12及以上版本默认开启），同时没正确配置nodeIntegration: true或者预加载脚本，那渲染进程里直接用require会报错，看起来像是路径无效，但其实是权限问题。这种情况可以二选一处理：

  • 要么在创建窗口时设置nodeIntegration: true（不推荐，存在安全风险）；
  • 要么通过预加载（preload）脚本引入auth-renderer的逻辑，再用contextBridge把功能暴露给渲染进程。

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