使用电子生成器构建时，电子应用程序显示空白屏幕

Posted 2023-03-22

【中文标题】使用电子生成器构建时，电子应用程序显示空白屏幕

【英文标题】：Electron app shows blank screen when built with electron-builder

【发布时间】：2020-05-14 01:29:31

【问题描述】：

正如标题所解释的，我有一个简单的 Electron 应用程序，它在启动时会加载一个 html 页面。一切正常，但如果我尝试使用 electron-builder (yarn dist) 构建项目，应用程序只显示一个空白屏幕。知道为什么会这样吗？

我的项目结构如下：

-- e2e
-- dist
-- node_modules
-- src
   -- app
   -- assets
   -- environments
   -- index.html
-- editor.config
-- angular.json
-- broswerlist
-- karma.conf.js
-- main.js
-- package.json
-- package-lock.json
-- tsconfig.json
-- tslint.json

我还发布了我的 main.js 和 package.json 文件：

ma​​in.js

const electron = require("electron")
const app, Menu, BrowserWindow = require("electron")
const path = require("path")

let mainWindow

app.on('window-all-closed', e => e.preventDefault() )
app.on('ready', createWindow);

function createWindow() 

  mainWindow = new BrowserWindow(
    width:1380,
    frame:false,
    closable: false,
    minimizable: false,
    maximizable: false,
    resizable: false,
    autoHideMenuBar: true,
    webPreferences: 
      nodeIntegration: true
    
  )


  mainWindow.webContents.openDevTools();


  mainWindow.loadURL(url.format(
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: "file",
    slashes: "true"
  ))

package.json

  "name": "test_app",
  "version": "1.0.0",
  "description": "test",
  "author": "me",
  "main": "main.js",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "electron": "electron .",
    "dist": "electron-builder",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  ,
  "private": true,
  "devDependencies": 
    "electron": "7.1.8",
    "electron-builder": "^22.2.0"
  ,
  "build": 
    "target": [
      "nsis"
    ]
  ,
  "dependencies": 
    "msal-electron-poc": "^0.1.0",
    "@angular-devkit/build-angular": "~0.803.21",
    "@angular/animations": "~8.2.14",
    "@angular/cli": "~8.3.21",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "fs": "0.0.1-security",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "rxjs": "~6.4.0",
    "ts-node": "~7.0.0",
    "tslib": "^1.10.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3",
    "zone.js": "~0.9.1"
  

【问题讨论】：

path.join(__dirname, 'dist/index.html') 的值是否符合您的预期？

我其实不知道。我正在尝试加载由 angular 构建并由 electron-builder 打包的 html 文件，但我不知道它的位置，也无法探索它，因为它位于 asar 文件中。

您可以使用this answer 来探索asar 文件，但我认为您需要path.join(__dirname, 'dist/whatever-your-app-name-is/index.html')

【参考方案1】：

//Replace
path.join(__dirname, 'dist/index.html')

//with
path.join(__dirname, 'src/index.html')

【讨论】：

这不是应该在没有角度组件工作的情况下加载源 html 文件吗？

对于 Electron-builder，dist 是应用程序文件出现的文件夹，它被排除在构建之外。在您的情况下，在通过角度 CLI 编译源代码后使用其他名称代替 dist。

【参考方案2】：

有同样的问题。并且能够通过运行在 Windows 上运行电子。 对于窗户：

vue-cli-service electron:build --mode development --windows

对于 Linux：

vue-cli-service electron:build --mode development --rpm

并检查是否有一些隐藏的错误或者它只是在之后工作。