电子显示空白window

Question

我的 HTML 文件没有按照教程中说的那样加载。这就是我所拥有的。是的，我试过做各种涉及路径的时髦事情，但没有解决问题。

main.js

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

const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600
    })
  
    win.loadFile("index.html")
  }

  app.whenReady().then(() => {
    createWindow()
  })

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

Answer 1

您可能需要更改 JavaScript 代码以获得 HTML 文件的完整路径。

尝试使用下面的代码，它将配置 Electron。在事件侦听中，它正在创建一个没有配置的新 BrowserWindow（尽管您可以根据需要添加它）。然后，它正在加载 HTML 文件的完整路径。

const electron = require("electron");

const {
  app,
  BrowserWindow
} = electron;

app.on("ready", () => {
  const mainWindow = new BrowserWindow({});
  mainWindow.loadURL(`file://${__dirname}\index.html`);
});

电子显示空白window

Electron shows blank window

html

javascript

node.js

electron