电子显示空白窗口答案

【问题标题】：Electron shows blank window电子显示空白窗口
【发布时间】：2022-04-29 15:24:50
【问题描述】：

我的 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>

【问题讨论】：

标签： javascript html node.js electron

【解决方案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`);
});

【讨论】：

这行得通，但为什么呢？
这很可能是 Electron 的工作方式。它喜欢拥有完整路径，而不是相对路径。