使用Electron Builder打包Angular-Electron应用后白屏问题求助

问题根源 #

本地运行ng build --prod && electron .正常，但electron-builder -w打包后白屏，核心原因有两点：

1. electron-builder默认不会自动将dist目录打包进app.asar，导致asar包内缺少Angular构建产物
2. 加载路径的字符串拼接写法不够健壮，适配不了打包后的asar环境路径结构

解决方案 #

1. 修正Angular构建的base href #

Electron加载本地HTML文件时，需将base href设为相对路径，避免绝对路径导致的资源加载失败：

• 临时构建时添加参数：

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

• 永久配置（修改angular.json）：

// angular.json -> projects -> electronn -> architect -> build -> options
"baseHref": "./",

2. 完善electron-builder打包配置 #

在package.json的build字段中添加files，明确指定要打包进asar的文件：

"build": {
  "appId": "com.rabit.electronn",
  "win": {
    "publish": [
      {
        "provider": "github"
      }
    ]
  },
  "files": [
    "main.js",
    "dist/**/*"
  ]
}

3. 优化main.js的页面加载路径 #

用path.resolve构建可靠的绝对路径，替代字符串拼接：

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

let win;  
function createWindow() {  
    win = new BrowserWindow({  
        width: 600,  
        height: 600,  
        backgroundColor: '#ffffff',  
    })  
    win.setMenu(null);  

    // 用path.resolve生成跨环境兼容的绝对路径
    const indexPath = path.resolve(__dirname, 'dist', 'electronn', 'index.html');
    win.loadURL(`file://${indexPath}`);
    win.webContents.openDevTools()  

    win.on('closed', function () {  
        win = null  
    })  
}  

// 以下生命周期代码保持不变
app.on('ready', createWindow)  
app.on('window-all-closed', function () {  
    if (process.platform !== 'darwin') {  
        app.quit()  
    }  
})  
app.on('activate', function () {  
    if (win === null) {  
        createWindow()  
    }  
}) 

4. 调整打包脚本 #

确保打包前自动执行Angular生产构建，修改package.json的scripts：

"build-win": "ng build --prod --base-href ./ && electron-builder -w"

验证步骤 #

1. 清理旧构建产物：Windows执行rmdir /s dist，macOS/Linux执行rm -rf dist
2. 运行打包命令：npm run build-win
3. 启动生成的exe文件，检查页面是否正常加载

如果仍有问题，可解压asar包排查文件结构：

npx asar extract ./dist/win-unpacked/resources/app.asar ./test-asar

查看test-asar目录下是否存在dist/electronn/index.html，确认构建产物是否被正确打包。

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