Electron集成Angular页面加载失败：net::ERR_FILE_NOT_FOUND求助

1. 修正Angular构建的base href配置 #

Angular默认构建的资源路径是绝对路径（/开头），在Electron的file://协议下会无法匹配本地文件，必须改为相对路径：

• 执行构建命令时添加参数：ng build --base-href ./
• 或者在angular.json中修改配置：找到projects -> [你的项目名称] -> architect -> build -> options，将baseHref设置为./
• 修改后重新构建生成dist文件夹

2. 核对Electron主进程的文件加载路径 #

确保index.js中loadFile/loadURL指向的路径与dist文件夹结构完全匹配：

• 假设你的dist文件夹结构为dist/你的项目名/index.html，主进程代码应写为：

mainWindow.loadFile('./dist/你的项目名/index.html')

• 注意路径是相对Electron入口文件（index.js）的位置，避免层级写错

3. 检查dist文件夹内的资源引用 #

打开dist里的index.html，确认所有css、js资源的引用路径是相对路径（比如./styles.xxx.css），而非绝对路径（/styles.xxx.css），绝对路径会导致file://协议下找不到资源

4. 验证文件路径大小写一致性 #

macOS/Linux系统区分文件路径大小写，确保index.js中写的路径和实际dist文件夹的文件名、文件夹名大小写完全一致

5. 确认Electron的文件访问权限（可选） #

如果有自定义的会话配置，需确保未限制file://协议的访问，可在主进程中添加：

app.on('ready', () => {
  // 其他初始化代码
  mainWindow.webContents.session.webRequest.onBeforeRequest((details, callback) => {
    if (details.url.startsWith('file://')) {
      callback({ cancel: false })
    }
  })
})

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