使用ember-electron时Ember与Electron应用编译资源不一致问题排查

你的核心问题是Electron加载的资源路径和实际编译后的指纹资源目录不匹配，主要是main.js里的协议配置与Ember编译路径没对齐，再加上指纹配置的影响。下面是具体的修复方案：

1. 修正Electron协议服务的路径配置 #

你的main.js里有两个关键配置，但它们指向的目录不一致：

• protocolServe的cwd参数通过join(__dirname, '..', 'ember')指向了electron-out/project/ember目录
• 但emberAppLocation设置为'serve://dist'，这会让Electron试图从根目录的dist文件夹加载资源，而实际带指纹的编译资源在electron-out/project/ember/assets里

你需要让这两个配置对齐，二选一即可：

方案A：让Electron加载electron-out里的编译资源（推荐，符合ember-electron默认流程） #

修改emberAppLocation为当前协议的根路径，因为protocolServe的cwd已经指向了Ember编译后的目录：

const emberAppLocation = 'serve://.';

这样Electron会直接从protocolServe指定的electron-out/project/ember目录加载index.html和对应资源，和编译后的指纹资源路径完全匹配。

方案B：让Electron加载根目录的dist资源 #

如果你希望复用ember build生成的dist目录资源，需要修改protocolServe的cwd参数，指向项目根目录的dist：

const { join } = require('path');
const { dirname } = require('path');
const __dirname = dirname(require.main.filename);

// 调整cwd指向项目根目录的dist文件夹
protocolServe({ 
  cwd: join(__dirname, '../../dist'), 
  app, 
  protocol, 
});

同时保持emberAppLocation为'serve://dist'即可。

2. 调整Ember的指纹配置，确保相对路径引用 #

在你的ember-cli-build.js里，检查指纹（fingerprint）配置，确保资源引用是相对路径，避免Electron找不到资源：

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    fingerprint: {
      prepend: '', // 留空或设为'./'，确保资源是相对路径
      enabled: true, // 保持指纹开启
    }
  });

  return app.toTree();
};

如果prepend设置了域名或绝对路径，Electron会去错误的位置查找资源，导致404。

3. 使用正确的编译命令同步资源 #

不要分开运行ember serve和ember electron，而是使用ember electron:build来完整编译Electron应用，或者直接用ember electron启动——这会自动同步Ember编译后的资源到electron-out目录，保证资源一致性。分开运行可能导致两次编译生成不同的指纹资源，出现路径不匹配的问题。

按照上面的步骤调整后，Electron加载的index.html就能正确引用到带指纹的资源了。

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