电子窗口显示屏幕截图

Question

所以我有一个名为main.js的电子应用程序，我从npm start 。 我已经将package.json中的启动脚本设置为electron main.js ，还尝试了electron . 。 当运行npm start ，一切都开始，没有任何错误，但是电子窗口仅显示我启动时屏幕上的快照。 我尝试刷新它，但似乎没有任何效果。 它的外观如下： Image它应该查看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

似乎您没有全局安装Electron，因为您需要运行npm install -g Electron

替换mainWindow.loadURL('http://localhost:3001'); 附：

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

Answer 2

您尚未共享package.json文件，但我想您可能没有运行npm install --save electron在终端中保存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 。