我正在学习电子学,我做了一个电子应用程序,可以读取和创建文件。当我用npm start
或electron .
启动应用程序时,它按预期工作:
但是当我使用npm run build
或build -w
命令时,构建的应用程序只显示白色
我的代码或我使用的命令是否有问题?
这是我的包. 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"
}
}
}
这是我的主页:
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 = " ";
})
}
9条答案
按热度按时间fgw7neuy1#
当我试图为windows构建时,我也遇到了类似的问题。
虽然
win.loadURL(...)
在开发中看起来是这样工作的,但在构建时可以尝试将其更改为:这可以确保它明确获得
index.html
文件的正确路径。要使
path.join(...)
和url.format(...)
正常工作,您需要先执行require
:8iwquhpp2#
我最近面临白色问题,在我的情况下一点点差异
我用vue框架与路由器(路由器必须是哈希)
1.对于电子版中带有vue路由器的vue.js
2.用于电子中带有react路由器的react.js
型
代替
没有任何框架
检查入口点url正确放置
hk8txs483#
在我的例子中,构建也显示了一个白色站点。对于那些在项目中使用React Router的人来说,这个解决方案可能会有帮助。
我的startUrl变量如下所示:
对我来说,解决方案是在
App.js
中从BrowserRouter
迁移到HashRouter
,如本文中所述pgky5nke4#
我不知道构建过程,特别是,我也有同样的问题,开发,电子显示什么,但一个空白的屏幕(可能是因为我点击了一个链接,这是不可用的早期)。
重建后,什么都没有显示在屏幕上。
对我有效的最后一个黑客是从系统中清除我的Appdata.
在我的例子中,我使用的是Linux,我通过转到
~/.config/myApp
来清除应用程序数据窗口:
C:\Users\<user>\AppData\Roaming\<yourAppName>\Cache
操作系统X:x1个主机2个主机
希望它能帮助有需要的人。
ws51t4hk5#
也许你使用了一个代码模板,它使用了两种情况,一种用于开发模式,一种用于生产模式,至少这是我的问题,所以对于开发模式,我使用了一个指向localhost的URL,而在生产模式下,它指向构建目录:像这样:
nkkqxpd96#
检查你如何设置主窗口的标题.
我尝试使用“进程.环境.npm_包_产品名称”
在当地工作正常,但 Package 时失败!
ggazkfy87#
我认为您的索引对于vue-router是错误的。要检查它,您可以在App. vue中放入一些文本。如果文本出现,您必须重定向到/
3z6pesqy8#
我也遇到了同样的问题。我认为这是一个错误的理解,电子应用程序将被捆绑成一个单一的.exe文件。
我使用了GitHub的electron-react-boilerplate模板,如果你要打包你的应用程序,它所做的就是生成一个目录,里面包含你的捆绑代码(electron-react-boilerplate模板会帮你做这些),以及一堆其他文件,其中包含release/build/win中生成的.exe文件-unpacked在release/build文件夹中。
要让它发挥作用,您需要做的是:
在release/app/dist/renderer/index.html(CODEWISE)中获取index.html文件的绝对路径(在主.ts/js中获取此路径)
然后在
mainWindow.loadUrl()
函数中使用这个文件url。然后你会意识到,整个发布文件夹实际上是你的应用程序分发给你的客户端。
aij0ehis9#
注:对于启动电子应用程序,请按照以下步骤操作:(原谅我的英语我的母语是法语)
1.首先忘记电子文件夹,不要碰它。
1.在react/ion目录(应用的根目录)中,将以下内容添加到package.json文件中:
"homepage": "./"
1.现在,从react/ionic目录(应用程序的根目录)导航到“public”目录,并更新index.html文件,将
<base href="/" />
替换为:<base href="./" />
ionic build && npx cap copy
npx cap open electron