Electron 构建成功后出现白屏

Question

我正在尝试将电子添加到我的 Angular 项目中，但它只会给我白屏。我查找了如何将其添加到 Angular 的教程，但它们都不起作用。

这是我的 main.js，它位于：my-app/main.js

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('src/index.html')
}

app.whenReady().then(() => {
  createWindow()

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

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

这是我的 package.js，它位于：my-app/package.json

{
  "name": "nexo-tester",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "electron .",
    "build": "ng build --prod",
    "i18n:extract": "ngx-translate-extract -i ./src/app -o ./src/assets/i18n/{cze,eng,slk}.json -f namespaced-json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.2.10",
    "@angular/cdk": "^11.2.9",
    "@angular/common": "~11.2.0",
    "@angular/compiler": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/material": "^11.2.9",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@ngx-translate/core": "~13.0.0",
    "@rxweb/reactive-form-validators": "~2.1.2",
    "@stomp/rx-stomp": "~1.0.1",
    "angularx-qrcode": "~11.0.0",
    "core-js": "~3.8.3",
    "hammerjs": "~2.0.8",
    "nw": "^0.52.2",
    "rxjs": "~6.6.3",
    "sockjs-client": "~1.5.0",
    "tslib": "~2.1.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.0",
    "@angular/cli": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@biesbjerg/ngx-translate-extract": "~7.0.3",
    "@types/lodash": "~4.14.168",
    "@types/node": "~14.14.27",
    "electron": "^12.0.5",
    "eslint": "~7.19.0",
    "lodash": "~4.17.20",
    "ts-node": "~9.1.1",
    "tslint": "~5.18.0",
    "typescript": "~4.1.5"
  },
  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.8.",
  "repository": {
    "type": "git",
    "url": "git+ssh://git@gitlab.com/filipo.hrmo/nexo-tester.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://gitlab.com/filipo.hrmo/nexo-tester/issues"
  },
  "homepage": "https://gitlab.com/filipo.hrmo/nexo-tester#readme"
}

我的索引位于：my-app/src/index.html

我错过了什么或者我做错了什么？

Answer 1

1. 在您的main.js 中直接使用const path = require('path') 而不是file://${__dirname}/your-file-name

    函数创建窗口 () {
      常量赢=新浏览器窗口（{
        宽度：800，
        身高：600，
        网络偏好：{
          预加载：`file://${__dirname}/dist/preload.js`
        }
      })
   
      win.loadFile(`file://${__dirname}/dist/index.html`)
    }
   

在上面的代码中，我假设您的生产版本将存储在 dist 文件夹中。

1. 在package.json修改如下

   {... "main": "main.js", “脚本”：{ “ng”：“ng”， “开始”：“ng服务”， “构建”：“ng构建”， “测试”：“ng测试”， “lint”：“ng lint”， “e2e”：“ng e2e”， “电子”：“ng build --prod && 电子。” } ... }

一旦你更新上面运行npm run electron

Answer 2

我找到了解决方案。 我将 main.js 更改为：

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

let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

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

  win.on("closed", () => {
    win = null;
  });
}

app.on("ready", createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});
 

这是我的 package.json 的第一部分，我没有对其进行任何其他更改：

{
  "name": "nexo-tester",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "ng build --baseHref=./ && electron .",
    "i18n:extract": "ngx-translate-extract -i ./src/app -o ./src/assets/i18n/{cze,eng,slk}.json -f namespaced-json"
  },