Электрон показывает белый экран при сборке

Question

Электрон показывает белый экран при сборке

Я изучаю электрон, и я сделал электронное приложение, которое читает и создает файлы. Когда я запускаю приложение с "npm start" или "электронным". работает как задумано вы можете увидеть приложение здесь

но когда я использую команды "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 = " ";
    })
}

12

javascript json electron electron-builder electron-packager

Источник

user9929167 19 июн '18 в 10:01

9 ответов

Другие вопросы по тегам javascript json electron electron-builder electron-packager

user8655257 25 сен '18 в 12:10 2018-09-25 12:10 · Answer 1 · 2018-09-25 12:10

У меня была похожая проблема, когда я пытался собрать для Windows.

В то время как win.loadURL(...) Кажется, что работает в процессе разработки, возможно, попытайтесь изменить это при сборке:

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

Это гарантирует, что он определенно выберет правильный путь к вашему index.html файл.

Для path.join(...) работать надо require это первое:

const path = require('path');

user11624647 22 авг '20 в 14:10 2020-08-22 14:10 · Answer 2 · 2020-08-22 14:10

Недавно я столкнулся с проблемой белого экрана, в моем случае небольшая разница

Я использовал фреймворк vue с маршрутизатором (маршрутизатор должен быть хеш-кодом)

1. для vue.js с маршрутизатором vue в электронном виде

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

2. для react.js с реактивным маршрутизатором в электронном

hashrouter

вместо того

BrowserRouter

без каких-либо рамок

проверьте правильность размещения URL точки входа

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

user3524404 22 мар '20 в 15:25 2020-03-22 15:25 · Answer 3 · 2020-03-22 15:25

В моем случае сборка также показала белый сайт. Для тех, кто использует 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>
  );
}

user11966205 18 янв '21 в 22:07 2021-01-18 22:07 · Answer 4 · 2021-01-18 22:07

Я не знаю особенно о процессе сборки, у меня была такая же проблема при разработке, этот электрон не показывает ничего, кроме пустого экрана (вероятно, потому, что я щелкнул ссылку, которая была недоступна ранее).

После пересборки и чего еще на экране ничего не показывалось.

Последним приемом, который сработал для меня, было удаление моих Appdata из системы.

В моем случае у меня был Linux, я очистил данные приложения, перейдя в ~/.config/myApp

Окна: C:\Users\<user>\AppData\Roaming\<yourAppName>\Cache

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

Надеюсь, это поможет кому-то в нужде.

18 май '21 в 15:20 2021-05-18 15:20 · Answer 5 · 2021-05-18 15:20

Возможно, вы использовали шаблон кода, в котором используются 2 варианта: один для режима разработки, а другой - для производства. По крайней мере, это была моя проблема, поэтому для режима разработки я использовал URL-адрес localhost, а в производстве он указывает на каталог сборки: вот так:

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

user14079947 02 июн '22 в 23:01 2022-06-02 23:01 · Answer 6 · 2022-06-02 23:01

Я думаю, что ваш индекс неверен для 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>

user7475223 17 ноя '22 в 20:10 2022-11-17 20:10 · Answer 7 · 2022-11-17 20:10

У меня такая же проблема. Я думаю, что неправильно понимать, что электронное приложение будет упаковано в один файл .exe.

Я использовал шаблон electronic-react-boilerplate с GitHub. Если вы собираетесь упаковывать свое приложение, все, что он делает, — это создает каталог с вашим связанным кодом (шаблон electronic-react-boilerplate делает это за вас) и кучу других файлов со сгенерированным файлом .exe в release/build/ win-распакованный в папку релиза/сборки.

Что нужно сделать, чтобы заставить его работать:

Получите абсолютный код пути вашего файла index.html в файле release/app/dist/renderer/index.html (CODEWISE) (получите этот путь в файле main.ts/js)

Затем используйте этот URL-адрес файла в своемmainWindow.loadUrl()функция.

Тогда вы поймете, что вся папка релиза на самом деле является вашим приложением для распространения среди ваших клиентов.

user7230746 28 мар '22 в 13:23 2022-03-28 13:23 · Answer 8 · 2022-03-28 13:23

проверьте, как вы установили заголовок для главного окна.

Я пытался использовать «process.env.npm_package_productName».

      mainWindow.setTitle(process.env.npm_package_productName);

отлично работает локально, но не работает при упаковке!

0

Источник

user7230746 28 мар '22 в 13:23

user11960977 23 май '20 в 03:49 2020-05-23 03:49 · Answer 9 · 2020-05-23 03:49

Примечание. Чтобы запустить приложение с электроном, выполните следующие действия:(простите мой английский, я являюсь носителем французского языка)

В первую очередь забудьте про электронную папку, не трогайте ее.
В вашем каталоге response /ion[введите описание изображения][1]ic, который является вашим корневым каталогом для приложения, добавьте в файл package.json следующее: "homepage": "./"
Теперь из вашего каталога response /ionic, который является вашим корневым каталогом для приложения, перейдите в каталог "public" и обновите файл index.html, заменив его на:
Теперь выполните следующую команду, и все... a. ionic build && npx cap copy b. npx крышка открытый электронenter code here