Electron打包Mac应用后出现资源及模块找不到问题

这些错误本质上都是打包后文件路径解析逻辑变化导致的——开发时直接用相对路径能找到的资源/模块，打包后因为应用的文件结构变了，原来的路径就失效了。下面分情况给你具体的解决方案：

1. 静态资源（如bootstrap.min.css）加载失败 #

开发环境下，你可能直接用了类似 <link rel="stylesheet" href="./css/bootstrap.min.css"> 的相对路径，但打包后，Electron的文件系统根路径和开发时不一样了。

解决办法：

• 在渲染进程中利用Node.js的path模块结合__dirname生成绝对路径，比如在HTML里通过脚本动态插入样式：

  const path = require('path');
  const cssPath = path.join(__dirname, 'css/bootstrap.min.css');
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = cssPath;
  document.head.appendChild(link);
  

• 或者直接在HTML里使用绝对的file://协议路径（注意要对应你打包后的文件结构）：

  <link rel="stylesheet" href="file://${__dirname}/css/bootstrap.min.css">
  

  （如果用这种方式，需要确保Electron的webPreferences中开启了nodeIntegration: true，新版Electron还可能需要设置contextIsolation: false，不过更推荐用动态插入的方式）

2. jQuery模块找不到 #

你现在用的是./node_modules/jquery/dist/jquery.min.js这种相对路径引用，打包后node_modules的结构可能被打包工具处理过，相对路径就失效了。

正确的做法是：

• 直接通过模块名引用jQuery，因为electron-packager会把dependencies里的包打包进应用。在渲染进程的JS文件里：

  window.$ = window.jQuery = require('jquery');
  

  这样就不需要在HTML里引入jQuery的script标签了，直接在JS里挂载到全局即可。

3. node-wifi模块找不到 #

这个问题大概率是两个原因：

• 你把node-wifi放在了devDependencies里，electron-packager默认不会打包devDependencies的包。检查你的package.json，把node-wifi移到dependencies里，然后重新执行npm install。
• 如果是原生模块（node-wifi包含原生代码），需要确保它适配了当前Electron的版本。可以用electron-rebuild重新编译：

  # 先安装electron-rebuild
  npm install --save-dev electron-rebuild
  # 运行重新编译
  npx electron-rebuild
  

  之后再重新打包，模块就能被正确识别了。

另外，打包时可以检查electron-packager的参数，比如有没有加--ignore规则误排除了依赖包，确保没有忽略node_modules里的必要依赖。

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