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。

此外，代替：

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。

电子窗口显示屏幕截图

2 个答案: