电子在构建时显示白屏

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 = " ";
    })
}

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');

Answer 2

在我的例子中，构建也显示了一个白色站点。对于那些在他们的项目中使用 React Router 的人来说，这个解决方案可能会有所帮助。

我的 startUrl 变量如下所示：

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

对我来说，解决方案是将 App.js 中的 BrowserRouter 移动到 HashRouter，如前所述 in this thread

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

Answer 3

注意：要使用电子启动应用程序，请按照以下步骤操作：（原谅我英语我的母语是法语)

首先忘记电子文件夹，不要碰它。
在应用程序的根目录 react/ion 中，在 package.json 文件中添加以下内容："homepage": "./"
现在从您的 react/ionic 目录（应用程序的根目录）导航到“public”目录并更新您的 index.html 文件替换<base href="/" /> 与：<base href="./" />
现在运行下面的命令就是这样...
- ionic build && npx cap copy
- npx cap open electron

Answer 4

我最近遇到白屏问题，我的情况有点不同

我使用了带有路由器的 vue 框架（路由器必须是哈希）

1.for vue.js 在 electron 中使用 vue 路由器

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

2.for react.js 在电子中使用 React 路由器

hashrouter

而不是

BrowserRouter

没有任何框架

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

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

Answer 5

我特别不知道构建过程，我在开发中也遇到了同样的问题，那个 electron 只显示一个空白屏幕（可能是因为我点击了之前不可用的 link） .

重建之后屏幕上什么也没有显示。

最后一个对我有用的技巧是从系统中清除我的 Appdata。

在我的情况下，我有 linux 我通过转到 ~/.config/myApp

清除了应用程序数据

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

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

希望对有需要的人有所帮助。

Answer 6

也许您使用了使用 2 个案例的代码模板，一种用于开发模式，一种用于生产。至少那是我的问题，所以对于开发模式，我曾经使用 URL 到本地主机，在生产中，它指向构建目录：像这样：

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

Answer 7

检查您如何设置主标题 window。

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

mainWindow.setTitle(process.env.npm_package_productName);

在本地工作正常，但打包时失败！

Answer 8

我认为您的 vue-router 索引是错误的。要检查它，您可以在 App.vue 中输入一些文本。如果出现文本，您必须重定向到 /

// App.vue

<template>
    <div>
        <h1>Test</h1>
        <router-view />
    </div>
</template>


<script setup lang="ts">
import { onMounted } from 'vue';
import router from './router'

onMounted(() => {
    router.push('/')
})
</script>

电子在构建时显示白屏

Electron shows white screen when built

javascript

electron

electron-builder

electron-packager