Electron 构建时显示白屏
Posted
技术标签:
【中文标题】Electron 构建时显示白屏【英文标题】：Electron shows white screen when built 【发布时间】：2018-11-28 06:05:41 【问题描述】：我正在学习电子，我制作了一个电子应用程序来读取和创建文件。
当我使用 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 = " ";
)
【问题讨论】：
【参考方案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');
【讨论】：
有效！您还必须包含const url = require('url'); 【参考方案2】：
在我的情况下，我最近遇到了白屏问题
我用vue框架和路由器（路由器必须是hash）
1.for vue.js 在电子中使用 vue 路由器
const router = new VueRouter(
mode: 'hash',
routes: [...]
)
2.for react.js with react router in electron
hashrouter
而不是
BrowserRouter
没有任何框架
检查入口点 url 放置是否正确
win.loadURL('app://./index.html')
【讨论】：
【参考方案3】：在我的情况下，构建也显示了一个白色站点。对于那些在他们的项目中使用 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>
);
【讨论】：
【参考方案4】：我不知道特别是构建过程，我在开发时也遇到了同样的问题，电子只显示一个空白屏幕（可能是因为我点击了一个之前不可用的链接）。
重建后，屏幕上什么也没有显示。
对我有用的最后一个技巧是 从系统中清除我的 Appdata。
就我而言，我有 linux，我通过转到 ~/.config/myApp 清除了应用数据
Windows：C:\Users\<user>\AppData\Roaming\<yourAppName>\Cache
OSX：/Users/<user>/Library/Application Support/<yourAppName>/Cache
希望对有需要的人有所帮助。
【讨论】：
【参考方案5】：也许您使用了一个包含 2 个案例的代码模板， 一种用于开发模式，一种用于生产。至少那是我的问题，所以对于开发模式，我曾经使用 localhost 的 URL，而在生产中，它指向构建目录：就像这样：
const prodPath = format(
pathname: resolve('renderer/out/start/index.html'),
protocol: 'file:',
slashes: true
)
【讨论】：
【参考方案6】：注意：要使用电子启动应用程序，请按照以下步骤操作：（请原谅我 英语我是法语母语者）
首先忘记电子文件夹，不要碰它。
在您的 react/ion 目录中，即您的应用程序根目录，在您的 package.json 文件中添加以下内容："homepage": "./"
现在从作为应用根目录的 react/ionic 目录导航到“public”目录并更新 index.html 文件，将 <base href="/" /> 替换为：<base href="./" />
现在运行以下命令，就是这样......
ionic build && npx cap copy
npx cap open electron
【讨论】：
抱歉，这仅适用于 ionic以上是关于Electron 构建时显示白屏的主要内容，如果未能解决你的问题，请参考以下文章