如何创建angular电子应用程序的exe包

Question

我开发了一个 angular 6 的应用程序。我正在尝试使用电子构建 .exe。 当我在开发环境中进行电子构建时，它工作正常，但现在我想为 Windows 发布一个包我已经在我的机器上安装了电子打包器，试图为 Windows 进行构建。 我已经在 Linux 机器上安装了 wine 来运行构建。 它正在构建应用程序，但是当我运行 .exe 文件时，它会显示一个空窗口。 我不明白问题是什么以及为什么它向我显示一个空屏幕。

 // main.ts const { app, BrowserWindow } = require('electron') const path = require('path'); let win; function createWindow () { win = new BrowserWindow({ width: 600, height: 600, backgroundColor: '#ffffff' }) win.maximize() win.loadURL(`file://${__dirname}/dist/task-reporting-tool/index.html`) 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() } }) // package.json "main": "main.js", "description": "task-reporting-tool", "files": [ "build", "*.js", "public"], "scripts": { "electron": "electron .", "electron-build": "ng build --prod && electron .", "packager": "electron-packager . WinApp --platform=win32 --arch=all" }

 index.html <base href="./">

我创建了一个 main.js 文件。 在 index.html 文件和 package.json 中完成更改。

使用 npm run packager 进行构建。 所有必需的更改都已完成构建成功但显示一个空白屏幕。

Answer 1

安装 npm 然后尝试：

electron-packager . --asar
electron-packager . --all

Answer 2

你可以试试：

win.loadURL(
    url.format({
      pathname: path.join(__dirname, "/dist/angular-electron/index.html"),
      protocol: "file:",
      slashes: true
    })
);