使用Electron Packager打包Electron-Angular应用时资源加载失败

问题场景 #

• Angular采用多项目结构（Desktop应用+Library 1、Library 2），资源从各库合并至Desktop的assets文件夹
• 生产构建后dist/desktop内资源正常，但通过Electron Packager打包成.exe后，运行时所有资源无法加载，路径缺失关键部分
• 打包命令已生成正常的app.asar文件，开发模式下资源加载无问题

解决步骤 #

1. 修正Angular的Base Href配置 #

Electron打包后应用运行在本地文件系统而非HTTP服务器，必须使用相对路径作为base href：

• 构建Desktop应用时添加参数：

  ng build desktop --prod --base-href ./
  

• 或在angular.json的Desktop项目build配置中直接设置：

  "build": {
    "options": {
      "baseHref": "./",
      // 其他配置...
    }
  }
  

2. 规范Electron主进程的页面加载路径 #

主进程中必须使用path.join和__dirname拼接本地路径，避免硬编码：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 根据项目需求调整以下配置
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 加载打包后的index.html
  mainWindow.loadFile(path.join(__dirname, 'index.html'));
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

3. 检查资源引用路径 #

• 所有模板和代码中的资源引用必须使用相对路径，比如./assets/images/icon.png，禁止使用绝对路径/assets/...
• 确保库的资源在构建时正确合并到Desktop的assets：在Library的angular.json配置中指定资源输出路径：

  "build": {
    "options": {
      "assets": [
        "src/assets",
        {
          "glob": "**/*",
          "input": "src/assets",
          "output": "../../dist/desktop/assets"
        }
      ]
    }
  }
  

4. 调整Electron Packager参数 #

• 若主进程文件（如main.js）不在dist/desktop根目录，需通过--main参数指定：

  electron-packager ./dist/desktop MyAppName --overwrite --asar --platform=win32 --arch=x64 --icon=projects/desktop/src/assets/logo-accent.ico --prune=true --out=dist --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="MyAppName" --main=main.js
  

• 若asar压缩导致资源无法读取，可指定asarUnpack参数解压资源目录：

  electron-packager ./dist/desktop MyAppName --overwrite --asar --asarUnpack="assets/**/*" --platform=win32 --arch=x64 --icon=projects/desktop/src/assets/logo-accent.ico --prune=true --out=dist --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="MyAppName"
  

5. 验证打包后的路径结构 #

用asar extract app.asar ./temp命令解压app.asar，检查内部assets文件夹的层级和资源是否完整，对比开发环境的路径结构，确认是否存在路径缺失问题。

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