Cordova运行Electron时所有JS/CSS资源报ERR_FILE_NOT_FOUND错误

这个错误的核心原因是Electron基于file://协议加载页面时，资源拼接路径和实际文件存放路径不匹配，按以下顺序排查即可：

• 检查config.xml的入口配置
  打开项目根目录的config.xml，找到<content>节点，Electron平台下该节点的src属性必须直接指向index.html，不能带斜杠前缀或者多余目录层级：

  <!-- 正确配置 -->
  <content src="index.html" />
  
  <!-- 错误配置示例：带斜杠前缀会被file协议识别为磁盘根目录，带多余层级会偏移路径基准 -->
  <!-- <content src="/index.html" /> -->
  <!-- <content src="dist/index.html" /> -->
  

• 检查index.html的base标签配置
  打开www目录下的index.html，查看head区域是否配置了<base>标签，绝对路径的base标签是file协议下资源404的高发原因：
  • 错误写法：<base href="/">，该写法会让所有相对路径从当前磁盘根目录开始查找，必然找不到项目内资源
  • 正确配置：直接删除base标签，或者改为相对路径写法<base href="./">
• 校验--nobuild参数对应的构建产物完整性
  加--nobuild参数启动时，Cordova不会重新将根目录www下的资源同步到Electron平台的构建目录，会直接读取platforms/electron/www/下的现有文件，如果之前构建不全、或者根目录www更新后没同步，就会出现全资源404：
  1. 手动删除platforms/electron/www目录
  2. 执行cordova build electron完成全量资源同步
  3. 再执行cordova run electron --nobuild启动验证
• 自定义主进程代码的路径校验（仅修改过主进程逻辑时需要检查）
  如果你调整过platforms/electron/main.js的窗口加载逻辑，确认加载入口的路径拼接正确：

  const path = require('path')
  // 正确写法
  mainWindow.loadFile(path.join(__dirname, 'www', 'index.html'))
  

  漏写www层级、或者写死绝对路径都会导致资源加载基准错误。

快速定位技巧：启动Electron后按Ctrl+Shift+I（Mac为Cmd+Opt+I）打开开发者工具，在Console面板点击任意一条报错的资源链接，看地址栏显示的file://完整路径，和本地文件实际磁盘路径对比，就能直接定位路径拼接错误的位置：比如路径直接跳到磁盘根目录就是base标签或content配置带了前缀斜杠，路径缺www层级就是主进程loadFile配置错误。

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