Electron 构建时显示白屏 [英] Electron shows white screen when built

问题描述

我正在学习电子，我制作了一个电子应用程序来读取和创建文件.当我使用 npm start 或 electron . 启动应用程序时，它按预期工作:

I'm learning electron and I've made an electron app that read and create files. When I start the application with npm start or electron . it works as intended:

但是当我使用 npm run build 或 build -w 命令时，构建的应用程序只是显示白屏

But when I use npm run build or build -w commands, the application built just shows a white screen

我的代码有问题还是我使用的命令有问题?

Is there something wrong with my code or something wrong with the commands I'm using?

这是我的 package.json

This is my package.json

 {
  "name": "prova",
  "version": "1.1.3",
  "description": "Prova electron",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "dist" : "build"
  },
  "author": "Randy",
  "license": "ISC",
  "devDependencies": {
    "electron": "^2.0.2",
    "electron-packager": "^12.1.0"
  },
  "build": {
    "appId": "prova",
    "win":{
      "target" : "nsis",
      "icon" : "icon.ico"
    }
  }
}

这是我的主要 js 页面:

This is my main js page:

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

function boot(){
    win = new BrowserWindow()
    win.loadURL(url.format({
        pathname: 'index.html',
        slashes: true
    }))
}

app.on('ready', boot);

还有我的函数js页面:

and there is my functions js page:

var app = require("electron").remote;
var dialog = app.dialog;
var fs = require("fs");
var i = 0;
var stringaLetta = "";

document.getElementById("bottone").onclick = function(){
    dialog.showSaveDialog((fileName) => {
        if(fileName === undefined){
            alert("errore")
            return
        }

        var content = document.getElementById("testo").value;

        fs.writeFile(fileName, content, (err) => {
            if (err == undefined) {
                dialog.showMessageBox({
                    message: "the file has been saved",
                    buttons: ["OK"]
                });
            }
            else dialog.showMessageBox({
                message: err
            })
        })
    })
}
document.getElementById("bottone2").onclick = function(){
    dialog.showOpenDialog((fileNames) => {
        if(fileNames === undefined){
            dialog.showMessageBox({
                message: "errore durante l'apertura",
                buttons: ["OK"]
            })
            return
        } else{
            readFile(fileNames[0]);
        }
    }) 
}

function readFile(fP){
    fs.readFile(fP, 'utf-8', (err, data) => {
        if(err){
            alert(err)
            return
        }
        var textArea = document.getElementById("rtesto")
        textArea.innerHTML = "";
        i = 0;
        do{
            if(data.charAt(i) == "
"){
                stringaLetta += "<br>";
            }else{
                stringaLetta += data.charAt(i);
            }
            i++;
        }while(data.charAt(i) != "")
        textArea.innerHTML = stringaLetta;
        stringaLetta = " ";
    })
}

推荐答案

我在尝试为 windows 构建时遇到了类似的问题.

I had a similar problem when I tried to build for windows.

虽然 win.loadURL(...) 在开发中似乎是这样工作的，但也许在构建时尝试将其更改为:

While the win.loadURL(...) seems to work like that in development, maybe try to change it to this when building:

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

这确保它明确获得您的 index.html 文件的正确路径.

This makes sure it definitly gets the right path to your index.html file.

为了使 path.join(...) 和 url.format(...) 工作，您需要 require 他们第一:

For the path.join(...) and url.format(...) to work you need to require them first:

const path = require('path');
const url = require('url');

这篇关于Electron 构建时显示白屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！