Electron构建后显示白屏问题

Question

我正在学习 Electron，并且已经制作了一个可以读取和创建文件的 Electron 应用程序。当我使用 npm start 或 electron . 启动应用程序时，它按预期工作：

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

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

这是我的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页面：

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页面：

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) == "\n"){
                stringaLetta += "<br\>";
            }else{
                stringaLetta += data.charAt(i);
            }
            i++;
        }while(data.charAt(i) != "")
        textArea.innerHTML = stringaLetta;
        stringaLetta = " ";
    })
}

- Filippo Randon

Answer 1

当我尝试构建Windows版本时，我遇到了类似的问题。

虽然在开发中win.loadURL(...)似乎可以工作，但是在构建时，请尝试将其更改为：

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

这可以确保它确定地获取到你的index.html文件的正确路径。

为了让path.join(...)和url.format(...)正常工作，你需要先require它们：

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

- Julian Z.

---

可以了！你还需要包含const url = require('url'); - joronimo

Answer 2

我最近遇到了白屏问题，与我的情况略有不同。

我使用了带有router的Vue框架（路由器必须是hash）。

1. 在Electron中使用Vue.js和Vue Router

const router = new VueRouter({
  mode: 'hash',
  routes: [...]
})

2. 在Electron中使用React.js和React Router

hashrouter

取代

BrowserRouter

不使用任何框架

检查入口点 URL 是否正确放置

 win.loadURL('app://./index.html')
 

- Balaji

Answer 3

在我的情况下，构建也显示了一个白屏。对于那些在项目中使用React Router的人来说，这个解决方案可能会有所帮助。

我的startUrl变量看起来像这样:

const startUrl = process.env.ELECTRON_START_URL || url.format(
 {
    pathname: path.join(__dirname, '/../build/index.html'),
    protocol: 'file:',
    slashes: true
 });

对我来说，解决方案是将 BrowserRouter 替换为 HashRouter 在你的 App.js 中，如此贴子中所述

render() 
{
  return (
     <Provider store = { store }>
        <HashRouter>
           <Switch>
              <Route exact path='/' component={Home} />
              <Route exact path='/Login' component={Login} />
           </Switch>
        </HashRouter>
     </Provider>
  );
}

- schacker22

Answer 4

也许您使用的是一个包含两种情况的代码模板，一种用于开发模式，一种用于生产模式。至少这是我的问题，因此在开发模式下，我使用本地主机的URL，而在生产模式下，它指向构建目录，如下所示：

const prodPath = format({
  pathname: resolve('renderer/out/start/index.html'),
  protocol: 'file:',
  slashes: true
})

- LironShirazi

Answer 5

我对构建过程不是很了解，开发时也遇到了同样的问题，electron只显示一个空白屏幕（可能是因为我之前点击了一个不可用的链接）。

重新构建后，仍然没有任何内容显示在屏幕上。

最终对我有用的解决方法是清除我的系统中的Appdata。

在我的情况下，我使用的是Linux，通过进入~/.config/myApp来清除应用数据。

Windows：C:\Users\<user>\AppData\Roaming\<yourAppName>\Cache

OSX：/Users/<user>/Library/Application Support/<yourAppName>/Cache

希望这能帮助有需要的人。

- Abhishek Kumar

Answer 6

检查一下你如何设置主窗口的标题。

我尝试使用 'process.env.npm_package_productName'

mainWindow.setTitle(process.env.npm_package_productName);

本地运行正常，但打包后出现故障！

- Tom Oeser

Answer 7

我曾经遇到过同样的问题。我认为这是一个误解，即electron应用程序将被捆绑成单个.exe文件。

我使用了GitHub上的electron-react-boilerplate模板。如果你要打包你的应用程序，它所做的就是生成一个带有你的捆绑代码的目录（electron-react-boilerplate模板会为你完成此操作），以及在release/build/win-unpacked文件夹中生成一堆其他文件和生成的.exe文件。

要使其正常工作，你需要：

通过代码获取你的index.html文件在release/app/dist/renderer/index.html中的绝对路径（CODEWISE）（在main.ts/js中获取此路径）

然后在mainWindow.loadUrl()函数中使用此文件URL。

然后你会意识到，整个release文件夹实际上就是你要分发给客户的应用程序。

- Niklas Rotter

Answer 8

注意：要使用Electron启动应用程序，请按照以下步骤操作：

1. 首先，忘记electron文件夹，不要碰它。

2. 在您的React / Ionic目录中，也就是应用程序的根目录中，在package.json文件中添加以下内容："homepage": "./"

3. 现在从您的React / Ionic目录中，也就是应用程序的根目录中，导航到“public”目录，并更新您的index.html文件，将<base href="/" />替换为：<base href="./" />

4. 现在运行以下命令，就完成了...

   • ionic build && npx cap copy
   • npx cap open electron

- Gnopor

---

抱歉，这只适用于Ionic。 - Gnopor