electron 构建时电子显示白色

bfnvny8b  于 2022-12-16  发布在  Electron
关注(0)|答案(9)|浏览(193)

我正在学习电子学,我做了一个电子应用程序,可以读取和创建文件。当我用npm startelectron .启动应用程序时,它按预期工作:

但是当我使用npm run buildbuild -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 = " ";
    })
}
fgw7neuy

fgw7neuy1#

当我试图为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');
8iwquhpp

8iwquhpp2#

我最近面临白色问题,在我的情况下一点点差异
我用vue框架与路由器(路由器必须是哈希)
1.对于电子版中带有vue路由器的vue.js

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

2.用于电子中带有react路由器的react.js

hashrouter


代替

BrowserRouter

没有任何框架
检查入口点url正确放置

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

hk8txs483#

在我的例子中,构建也显示了一个白色站点。对于那些在项目中使用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,如本文中所述

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

pgky5nke4#

我不知道构建过程,特别是,我也有同样的问题,开发,电子显示什么,但一个空白的屏幕(可能是因为我点击了一个链接,这是不可用的早期)。
重建后,什么都没有显示在屏幕上。
对我有效的最后一个黑客是从系统中清除我的Appdata.
在我的例子中,我使用的是Linux,我通过转到~/.config/myApp来清除应用程序数据
窗口:C:\Users\<user>\AppData\Roaming\<yourAppName>\Cache
操作系统X:x1个主机2个主机
希望它能帮助有需要的人。

ws51t4hk

ws51t4hk5#

也许你使用了一个代码模板,它使用了两种情况,一种用于开发模式,一种用于生产模式,至少这是我的问题,所以对于开发模式,我使用了一个指向localhost的URL,而在生产模式下,它指向构建目录:像这样:

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

nkkqxpd96#

检查你如何设置主窗口的标题.
我尝试使用“进程.环境.npm_包_产品名称”

mainWindow.setTitle(process.env.npm_package_productName);

在当地工作正常,但 Package 时失败!

ggazkfy8

ggazkfy87#

我认为您的索引对于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>
3z6pesqy

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。
然后你会意识到,整个发布文件夹实际上是你的应用程序分发给你的客户端。

aij0ehis

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

相关问题