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

Question

Итак, у меня есть электронное приложение с именем main.js, которое я начинаю с npm start. Я установил стартовый скрипт в package.json на electron main.js, а также попробовал electron .. При запуске npm start все запускается без ошибок, но электронное окно показывает только снимок того, что было на экране, когда я его запустил. Я пытался обновить его, но ничего не получается. Вот как это выглядит: Изображение Он должен просмотреть localhost:3001, но это не так. Я также пытался запустить electron . непосредственно в терминале, но это дает мне electron: command not found. При запуске ./node_modules/electron/dist/electron . он запускается как должен, но возникает та же проблема. Вот main.js:

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const core = require('./app');

let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: { webSecurity: false },
        nodeIntegration: false,
    })

    mainWindow.loadURL('http://localhost:3001');

    // mainWindow.setFullScreen(true)

    // mainWindow.setMenu(null);

    mainWindow.webContents.openDevTools()

    mainWindow.on('closed', function () {
        mainWindow = null
    })

    console.log('Electron window ready')
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
    app.quit()
})

core.start()

Answer 1

Вы не поделились своим package.json файлом, но я думаю, вы не запустили npm install --save electron в своем терминале.

Также вместо:

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

Вы хотите написать это так:

const electron = require('electron');
const { app, BrowserWindow } = electron;

Я бы рассмотрел деструктуризацию ES6, и, если вы не поделились с нами кодом, вы должны запустить свой электронный проект, убедившись, что объект app готов, и загрузить ваш файл следующим образом:

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({});
  mainWindow.loadURL(`file://${__dirname}/main.html`);
});

Вы заметите, что я объявил пустую переменную mainWindow для решения любых проблем с областями видимости, которые могут возникнуть, поскольку вам, возможно, придется использовать mainWindow и в других функциях.

Answer 2

Кажется, вы не установили Electron глобально, для этого вам нужно запустить npm install -g Electron

Заменить mainWindow.loadURL('http://localhost:3001'); на:

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